A simple and easy to use Context Menu with VUE

vue-easycm

A simple and easy to use Context Menu.

Install

npm install vue-easycm --save

Use

1.Import 导入

ES6

// 方法1.通过use挂载
import VueEasyCm from 'vue-easycm'
Vue.use(VueEasyCm)


//  方法2.通过require 导入
var VueEasyCm = require('VueEasyCm')



// 方法3.或者直接导入js文件
<script src="./dist/vue-easycm.js"></script>

2.Basic Usage

在需要触发环境菜单的容器标签上加上（固定写法）

例：
```
<div @contextmenu="$easycm($event,$root)"></div>
```
任意位置导入组件（选项数组必传，格式见配置项）

例：
```
<easy-cm :list=""></easy-cm>
```

3.Options 配置项

选项名	是否必须	默认值	介绍
:list	true	无	选项数组
:tag	false	无	配置多个时的标记
@ecmcb	false	无	返回触发元素序号
:underline	false	false	是否开启下划线
:arrow	false	false	是否开启箭头
:border	false	true	是否开启边界检测
:itemWidth	false	140	列表项宽度
:itemHeight	false	36	列表项高度
:itemSize	false	14	列表项字体大小
:offset	false	{ x: 6, y: 2 }	显示点偏移量
:borderWidth	false	6	边界距离

详细介绍：

数组格式如下

[{
      text: 'Play Now',
      icon: 'iconfont icon-bofang',  //选填 字体图标 class
      children: [] //选填
}]

*嵌套的子项格式一致

tag --> 标记

需要配置多个菜单时添加 tag , 类似取个 id

此时 @contextmenu="$easycm($event,$root,[tag])" 需要加上 tag 的值

如:
```
<div @contextmenu="$easycm($event,$root,1)">
    <p @contextmenu="$easycm($event,$root,2)"></p>
</div>
<easy-cm :tag="1"></easy-cm>
<easy-cm :tag="2"></easy-cm>
```
这个时候在 p 元素上会触发 tag 为 2 的菜单

div 的其他部分会触发 tag 为 1 的菜单
ecmcb --> 回调函数

解释：返回触发的序号数组，便于触发相应逻辑

如:

[0] 代表第一层的第一项

[0,1] 代表第一层的第一项的第二个子项

详见 demo code
边界检测见 demo gif
offset --> 显示点偏移量

解释: 菜单显示位置的左上角离鼠标的距离

如: {x:10,y:10}

*数值参数均无需带单位

vue-easycm

Install

Use

1.Import 导入

2.Basic Usage

3.Options 配置项

GitHub