vue-easycm

$3

| list |
| ---------------------------------------------------- |
| ---- 2018年5月25日08:58:15 修复滚动后位置错误 |
| ---- 2018年5月25日15:22:13 调整菜单隐藏事件触发顺序 |
| ---- 2018年6月14日14:51:06 修复回调函数触发问题 |

!http://boho.image.alimmdn.com/github/easycmdemo.gif?t=1524493555136

* 配置简单 自定义程度高

* 多种引用方式

* 最高三层菜单

* 可添加字体图标

* 边界检测

​

​

> 更多demo: http://boenfu.cn/vue-easycm/

Install

``
npm install vue-easycm --save
`

Use

$3

`js
ES6

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


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

// 方法3.或者直接导入js文件


`

$3

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

例：

`vue



`

​

2. 任意位置导入组件（选项数组必传，格式见配置项）

例：

`vue

`




$3

| 选项名 | 是否必须 | 默认值 | 介绍 |
| :----------: | :------: | :--------------: | :--------------: |
| :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 | 边界距离 |

详细介绍：

1. 数组格式如下

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

*嵌套的子项格式一致

​

2. tag --> 标记

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

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

如:

`vue





`

这个时候 在 p 元素上会触发 tag 为 2 的菜单

div 的其他部分会触发 tag 为 1 的菜单

​

3. ecmcb --> 回调函数

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

如:

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

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

详见 demo code

​

4. 边界检测 见 demo gif

​

5. offset --> 显示点偏移量

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

如: {x:10,y:10}

​

*数值参数均无需带单位

自定义样式

编写 预置的空 easy-cm-ul 样式类来修改样式

`html
// 代码结构


• 
  
  
  
  
  
  • 
    
    
    
    
    
    • 
      
      
      
    
    
    
    
  
  
  
  


`

例如：

!http://boho.image.alimmdn.com/github/p1.png?t=1524498301156

!http://boho.image.alimmdn.com/github/p2.png

Demo Code

`vue
// gif 图源码


``