技术聊斋

绑定目标附加数据

绑定附加id
绑定附加id
绑定附加id

指令方式绑定附加参数

<template>
  <div class="vue3-menus-item" v-for="(item, index) in items" :data="item" v-menus:all="menus">指令方式绑定附加参数{{index}}</div>
</template>
<script>
import { defineComponent, ref } from "vue";
import { directive } from 'vue3-menus';

export default defineComponent({
  name: "App",
  directives: {
    menus: directive
  },
  setup() {
    const items = ref([{id: 1},{id: 2},{id: 3}]);
    const menus = ref(
      [
        {
          label: "编辑",
          tip: '点击编辑选中数据',
          click: (menu, arg) => {
            console.log(arg.data) // 输出 {id: vaule}，data也就是上面div标签上的data，也可以换成其他
          },
        },
        {
          label: "删除",
          tip: '点击删除选中数据',
          click: (menu, arg) => {
            console.log(arg.data) // 输出 {id: vaule}，data也就是上面div标签上的data，也可以换成其他
          },
        }
    ]);
    return { menus, items }
  },
});
</script>
<style>
  .vue3-menus-item {
    margin-top: 1rem;
    background-color: #eee;
    line-height: 7rem;
    height: 7rem;
    text-align: center;
  }
</style>
HTML

方法方式绑定附加参数

<template>
  <div class="vue3-menus-item" v-for="(item, index) in items" @click="($event) => menusEvent($event, menus, item)" @contextmenu="($event) => menusEvent($event, menus, item)">
    方法方式绑定附加参数{{index}}
  </div>
</template>
<script>
import { defineComponent, ref } from "vue";
import { menusEvent } from 'vue3-menus';

export default defineComponent({
  name: "App",
  setup() {
    const items = ref([{id: 1},{id: 2},{id: 3}]);
    const menus = ref(
      [
        {
          label: "编辑",
          tip: '点击编辑选中数据',
          click: (menu, arg) => { // 方法第三个参数
            console.log(arg) // 输出 {id: vaule}
          },
        },
        {
          label: "删除",
          tip: '点击删除选中数据',
          click: (menu, arg) => { // 方法第三个参数
            console.log(arg) // 输出 {id: vaule}
          },
        }
    ]);
    return { menus, items, menusEvent }
  },
});
</script>
<style>
  .vue3-menus-item {
    margin-top: 1rem;
    background-color: #eee;
    line-height: 7rem;
    height: 7rem;
    text-align: center;
  }
</style>
HTML

组件方式绑定附加参数

<template>
  <div class="vue3-menus-item" v-for="(item, index) in items" @contextmenu="($event) => rightClick($event, item)" @click="($event) => rightClick($event, item)">
    组件方式绑定附加参数
  </div>
  <vue3-menus :open="open" :event="event" :menus="menus" :args="args">
  </vue3-menus>
</template>
<script>
import { defineComponent, ref } from "vue";
import { Vue3Menus } from 'vue3-menus';

export default defineComponent({
  name: "App",
  components: {
    Vue3Menus
  },
  setup() {
    const args = ref({});
    const open = ref(false);
    const event = ref({});
    const items = ref([{id: 1},{id: 2},{id: 3}]);
    const menus = ref(
      [
        {
          label: "编辑",
          tip: '点击编辑选中数据',
          click: (menu, arg) => { // 组件上添加的args属性值
            console.log(arg) // 输出 {id: vaule}
          },
        },
        {
          label: "删除",
          tip: '点击删除选中数据',
          click: (menu, arg) => { // 组件上添加的args属性值
            console.log(arg) // 输出 {id: vaule}
          },
        }
    ]);
    function rightClick(e, arg) {
      open.value = false;
      nextTick(() => {
        args.value = arg;
        event.value = e;
        open.value = true;
      })
      e.preventDefault();
    }
    return { rightClick, open, event, menus, args, items }
  },
});
</script>
<style>
  .vue3-menus-item {
    margin-top: 1rem;
    background-color: #eee;
    line-height: 7rem;
    height: 7rem;
    text-align: center;
  }
</style>
HTML