w-contextmenu v1.0.10

w-contextmenu

说明

右键菜单

引入

import 'w-contextmenu/lib/w-contextmenu.css'
import WContextmenu from 'w-contextmenu'
Vue.use(WContextmenu)

使用

<template>
  <div id="app">
    
    <div v-w-contextmenu:mycontextmenu="params">右键点我</div>

    <w-contextmenu
      @rename="handleRename"
      @delete="handleDelete"
      ref="mycontextmenu"
      :menus="menus"
    ></w-contextmenu>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      disabled:false,
      params: {
        name: "wcontextmenu",
      },
      menus: [
        {
          label: "重命名",
          eventName: "rename",
        },
        {
          label: "移除",
          eventName: "delete",
          divided: true,
        },
        {
          label: "新增",
          eventName: "add",
          disabled: true,
          divided: true,
        },
      ],
    };
  },
  methods: {
    handleRename(event, menu, params) {
      console.log("eventName:" + menu.eventName); //eventName:rename
      console.log("name:" + params.name); //params:wcontextmenu
    },
    handleDelete(event, menu, params) {
      console.log("eventName:" + menu.eventName); //eventName:delete
      console.log("params:" + params.name); //params:wcontextmenu
    },
  },
};
</script>

禁止右键

  <div v-w-contextmenu:mycontextmenu="{}" :w-contextmenu-disabled='disabled'>右键点我</div>

动态切换禁止项

<template>
  <div id="app">
    <div
      v-w-contextmenu:mycontextmenu="{
        name: '右键点我',
        disabled: {
          deletable: !deletable,
        },
      }"
      @toggleDelete="toggleDelete"
    >
      点击
    </div>
    <w-contextmenu
      @toggleDelete="toggleDelete"
      @delete="handleDelete"
      ref="mycontextmenu"
      :menus="menus"
    ></w-contextmenu>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      deletable: true,
      menus: [
        {
          label: "切换移除状态",
          eventName: "toggleDelete",
        },
        {
          key: "deletable",
          label: "移除",
          eventName: "delete",
          divided: true,
        },
      ],
    };
  },
  methods: {
    toggleDelete(event, menu, params) {
      console.log("切换")
      console.log("eventName:" + menu.eventName); //eventName:rename
      console.log("name:" + params.name); //params:wcontextmenu
      this.deletable = !this.deletable;
    },
    handleDelete(event, menu, params) {
      console.log("已删除")
      console.log("eventName:" + menu.eventName); //eventName:delete
      console.log("params:" + params.name); //params:wcontextmenu
    },
  },
};
</script>