npm install vue2.x-context-menu --save
//if you use yarn, you can
yarn add vue2.x-context-menu
import Vue from 'vue'
import contextmenu from 'vue2.x-context-menu';
import 'vue2.x-context-menu/dist/css/context-menu.css';
Vue.use(contextmenu);
If you register it as a global component, you can use it directly in the template tag of any component of your project. like this:
<div>
<ContextMenu :value="{id: 1, name:'哈哈哈'}" @handle-show="handleShow">
<Button type="primary">哈哈哈</Button>
<div slot="content">
<ContextMenuItem @click="handleSelect" label="哈哈哈1" value="哈哈哈1"><span>icon1</span></ContextMenuItem>
<ContextMenuItem @click="handleSelect" label="哈哈哈2" value="哈哈哈2"></ContextMenuItem>
</div>
</ContextMenu>
</div>
<template>
<div>
<div>
<h2>result</h2>
<h4>
<label for="">menu:</label>
<span>{{menu}}
</span>
<label for="">operate:</label>
<span> {{operate}}
</span>
</h4>
</div>
<br/>
<div>
<ContextMenu :value="{id: 1, name:'哈哈哈'}" @handle-show="handleShow">
<Button type="primary">哈哈哈</Button>
<div slot="content">
<ContextMenuItem @click="handleSelect" label="哈哈哈1" value="哈哈哈1"><span>icon1</span></ContextMenuItem>
<ContextMenuItem @click="handleSelect" label="哈哈哈2" value="哈哈哈2"></ContextMenuItem>
</div>
</ContextMenu>
</div>
<br/>
<div>
<ContextMenu :value="{id: 2, name:'呵呵呵'}" @handle-show="handleShow">
<Button type="info">呵呵呵</Button>
<div slot="content">
<ContextMenuItem @click="handleSelect" label="呵呵呵1" value="呵呵呵1" disabled><span>icon2</span></ContextMenuItem>
<ContextMenuItem @click="handleSelect" label="呵呵呵2" value="呵呵呵2"></ContextMenuItem>
</div>
</ContextMenu>
</div>
</div>
</template>
<script>
//only for local registration, if you register it as a global component, You do not have to do that
import contextmenu from 'vue2.x-context-menu'
import 'vue2.x-context-menu/dist/css/context-menu.css'
const {ContextMenu, ContextMenuItem } = contextmenu
export default {
data() {
return {
menu: '',
operate: ''
}
},
methods: {
handleShow: function(val){
this.menu = val
this.operate = ''
console.log(this.menu)
},
handleSelect: function(val) {
this.operate = val
console.log(this.operate)
}
},
//only for local registration, if you register it as a global component, You do not have to do that
components: {
ContextMenu,
ContextMenuItem
}
}
</script>
As you can see, there are two components, ContextMenu and ContextMenuItem
下面就用中文啦,作为**人,还是写点中文吧,再说英文写着也累
props
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
value | 鼠标右击的父元素 | Object或String | '' |
width | 弹出窗口的宽度 | String或Number | 200 |
event
事件名 | 说明 | 返回值 |
---|---|---|
handle-show | 鼠标右击时触发,返回点击的元素本身,即value值,此时可自己清除operate | 点击元素value |
props
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
label | 显示操作的标签 | String或Number | |
value | 点击菜单时的识别key,如删除操作可为delete | String或Number | |
disabled | 是否禁用 | Boolean | false |
event
事件名 | 说明 | 返回值 |
---|---|---|
click | 点击某操作时触发,返回value属性 |