vue contextmenu.js
时间: 2023-07-18 07:22:09 浏览: 49
contextmenu.js 是一个轻量级的右键菜单插件,可以方便地在 Vue 中使用。
首先需要安装 contextmenu.js:
```
npm install contextmenu.js
```
然后在组件中导入并使用:
```vue
<template>
<div ref="target" class="box" v-contextmenu="menuItems"></div>
</template>
<script>
import Contextmenu from 'contextmenu.js'
export default {
data() {
return {
menuItems: [
{
label: '关闭',
action: () => {
this.$router.go(-1)
}
},
{
label: '刷新',
action: () => {
location.reload()
}
}
]
}
},
mounted() {
const target = this.$refs.target
const contextmenu = new Contextmenu(target, this.menuItems)
contextmenu.render()
}
}
</script>
```
这里通过 v-contextmenu 指令绑定菜单项,然后在 mounted 钩子中创建 Contextmenu 实例,并调用 render 方法渲染菜单。
注意需要在组件中引入 Contextmenu 类,并且需要在菜单项的 action 中使用 this.$router 和 location 对象进行页面跳转和刷新操作。