vue-easycm

一个简单好用的 VUE 环境菜单 (Context Menu)

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

• 配置简单 自定义程度高

• 多种引用方式

• 最高三层菜单

• 可添加字体图标

• 边界检测

  ​

  ​

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

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 基础用法

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

   例：

   <div @contextmenu="$easycm($event,$root)"></div>

   ​

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

   例：

   <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 | 边界距离 |

详细介绍：

1. 数组格式如下

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

   *嵌套的子项格式一致

   ​

2. 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 的菜单

   ​

3. ecmcb --> 回调函数

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

   如:

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

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

   详见 demo code

   ​

4. 边界检测 见 demo gif

   ​

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

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

   如: {x:10,y:10}

   ​

   *数值参数均无需带单位

自定义样式

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

// 代码结构
<ul class="easy-cm-ul">
    <li>
      <div></div>
      <ul class="easy-cm-ul">
        <li>
          <div></div>
          <ul class="easy-cm-ul">
            <li>
              <div></div>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

例如：

Demo Code

// gif 图源码
<template>
  <div id="app" @contextmenu="$easycm($event,$root)">
    <easy-cm :list="cmList"
             @ecmcb="test"
             :underline="true"
             :arrow="true">
    </easy-cm>
  </div>
</template>
<script>
export default {
  name: 'app',
  data () {
    return {
        // 配置数组
      cmList: [{
        text: 'Play Now',
        icon: 'iconfont icon-bofang'
      },{
        text: 'Play Next',
        icon: 'iconfont icon-xiayishou'
      },{
        text: 'More',
        children: [{
          text: 'Download',
          children: []
        },{
          text: 'Report'
        },{
          text: 'Other',
          icon: 'iconfont icon-bofang',
          children:[{
            text: 'Other-1'
          },{
            text: 'Other-2'
          },{
            text: 'Other-3'
          }]
        }]
      }]
    }
  },
  methods:{
      // 回调函数
    test(indexList){
      switch (indexList[0]){
        case 0:
          console.log('立即播放');
          break
        case 1:
          console.log('下一首播放')
          break
      }
    }
  }
}
</script>