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