百度的话会出现两个版本 一个是 vue-contextmenu
还有一个是v-contextmenu
这两个我都用了一下 确切的说我是先用的第一个但是 无法实现添加icon 的功能,所以又找到了第二个。
vue-contextmenu 添加icon需要使用到 font Awesome 但是引入后,修改无法实现icon 的效果,可能是我还不会用 这里我就直接附上链接啦
vue contextmenu
另一个是v contextmenu 这个的使用和功能都相对要比另一个更加全面一点。
cnpm i v-contextmenu -S
可以安装依赖
main.js
全局引用
import contentmenu from 'v-contextmenu'
import 'v-contextmenu/dist/index.css'
Vue.use(contentmenu)
Submenu.vue
<template>
<div class="example">
<v-contextmenu ref="contextmenu" :theme="theme">
<v-contextmenu-item @click="handleClick">菜单1</v-contextmenu-item>
<v-contextmenu-item @click="handleClick">菜单2</v-contextmenu-item>
<v-contextmenu-item divider></v-contextmenu-item>
<v-contextmenu-submenu @submenu-show="handleSubmenuShow" title="子菜单">
<v-contextmenu-item @click="handleClick">菜单3</v-contextmenu-item>
<v-contextmenu-item divider></v-contextmenu-item>
<v-contextmenu-submenu title="子菜单">
<v-contextmenu-item @click="handleClick">菜单5</v-contextmenu-item>
</v-contextmenu-submenu>
<v-contextmenu-item @click="handleClick">菜单4</v-contextmenu-item>
<v-contextmenu-item :auto-hide="false">不自动关闭1</v-contextmenu-item>
<v-contextmenu-item :auto-hide="false">不自动关闭2</v-contextmenu-item>
</v-contextmenu-submenu>
</v-contextmenu>
<div :class="['box', theme]" v-contextmenu:contextmenu>
右键点击此区域
</div>
</div>
</template>
<script>
export default {
name: 'Submenu',
props: {
theme: String,
},
methods: {
handleClick (vm, event) {
console.log(vm, event)
},
handleSubmenuShow (vm, placement) {
console.log(vm, placement)
},
},
}
</script>
<style scoped>
.box {
width: 100%;
}
</style>
例子在github中都有提供,大家可以根据自己想要用的样式来自己选择