vue-right-click-menu-next ·

支持vue3的浏览器右键菜单插件，效果图如下：

插件安装

yarn add vue-right-click-menu-next

# or

npm install vue-right-click-menu-next --save

插件使用

• 在项目的入口文件main.ts/main.js中加入下述代码

import vueRightMenu from "vue-right-click-menu-next";

app.use(vueRightMenu);

• 在你的业务代码中，在元素上绑定v-right-click，然后传对应的参数即可，如果你启用了ts，可复制下方代码，否则需要对下方代码进行修改，删掉类型注解即可。

<template>
  <li
    class="row-panel"
    v-right-click:[{id:19,bookid:1024}]="rightMenuObj"
  >
</template>
<script lang="ts">
import { defineComponent } from "vue";
// 导入插件需要的参数类型
import { rightMenuType } from "vue-right-click-menu-next/dist/lib/type/pluginsType";
export default defineComponent({
  computed: {
    rightMenuObj(): rightMenuType {
      // 右键菜单对象，菜单内容和处理事件
      const obj: rightMenuType = {
        this: this,
        text: [
          "查看资料",
          { content: "复制用户id", status: true },
          "移除该会话",
          "在联系人中查看",
          "在单聊窗口中打开",
          "会话置顶"
        ],
        handler: {
          checkingData(parameter) {
            console.log(parameter);
            console.log("查看资料点击事件");
          },
          copyId() {
            console.log("复制用户id点击事件");
          },
          removeItem() {
            console.log("移除会话点击事件");
          },
          showContact() {
            console.log("在联系人中查看");
          },
          showSingleChat() {
            console.log("在单聊窗口中打开");
          },
          topConversation() {
            console.log("会话置顶");
          }
        }
      };
      return obj;
    }
  }
})
</script>

参数说明

如示例代码所示，在元素上绑定指令，在computed中定义一个对象，传菜单内容和与之对应的事件处理函数就可以了。

接下来就跟大家讲下对象里每个属性的意义：

• this 即当前vue实例，便于在处理函数中能访问到当前vue实例中的内容
• text 类型为数组，即右键菜单要显示的内容
  • 数组内的内容分为字符串或对象，如果为字符串这一项默认是可以点击的
  • 如果你想让某个选项无法点击，则传一个对象
    • content 要显示的文字内容，字符串类型
    • status 是否禁用，boolean类型
• 点击事件接受一个参数，具体写法可参考示例代码
• handler 事件处理函数，函数的顺序要与text数组内的文本顺序相对应

写在最后

至此，插件的所有使用方法就介绍完了。

该插件仅支持Vue3.x的项目，Vue2.x项目请移步: vue-right-click-menu

想进一步了解插件源码的请移步插件的GitHub仓库：vue-right-click-menu-next