介绍

有时候我们需要页面更简洁，可操作按钮更多，这个时候右键菜单就派上用场了，但web开发中右键菜单通常都是被浏览器占用的，而我们用到的少之又少，所以，通过扩展右键菜单，可以让我们的交互方式更加方便快捷

预览图

快速安装

npm

    npm install suwis-contextmenu --save-dev

yarn

    yarn add suwis-contextmenu

使用

    import Vue from 'vue'

    import contextmenu from 'suwis-contextmenu'

    Vue.use(contextmenu, options)

options

{
  background: '#fff', // 背景颜色
  hover: '#fff', // 鼠标悬浮上去的颜色
  activation: {
    click: false, // 单击显示菜单
    rightclick: true // 右键点击显示菜单
  },
  registry: {
    // module a
    pages: [{
      key: 'copy',
      value: '复制'
    }, {
      key: 'edit',
      value: '编辑'
    }, {
      key: 'remove',
      value: '删除'
    }],
    // module b
    modules: [{
      key: 'delete',
      value: '删除'
    }, {
      key: 'edit',
      value: '编辑'
    }]
  }
}

registry 介绍

registry是一个对象，只有事先注册过的元素，才能响应右键菜单

events

| 属性 | 类型 | 说明 | | ---------------------- | -------- | -------------------------------------------------------------------------- | | contextmenu-click | function | 右键菜单项点击事件 | | contextmenu-showbefore | function | 右键菜单显示前触发钩子，用来校验个别菜单项是否需要显示,event.detail 为菜单项的集合，可设置每一项的visible属性调整菜单的显示状态 |

使用示例：

javascript

import Vue from 'vue'

import contextmenu from 'suwis-contextmenu'

let options = {
  background: #fff,
  hover: #efefef,
  registry: {
    // 桌面
    desktop: [{
      key: 'toggleFullScreen',
      value: '进入全屏'
    }, {
      key: 'refresh',
      value: '刷新'
    }, {
      key: 'nextbg',
      value: '下一张壁纸'
    }, {
      key: 'prevbg',
      value: '上一张壁纸'
    }, {
      key: 'personalized',
      value: '个性化设置'
    }]
  }
}

Vue.use(contextmenu, options)

html

<template lang="html">
  <div data-role="desktop" @contextmenu-click="dispatchEvent">
    <p>
      在此区域右键则会出现注册表中的desktop中的菜单项，
      接收右键点击事件可在元素上注册 contextmenu-click 事件即可接收到，右键点击事件的相应结果，
      事件对象可通过event获取到被电击的项
    </p>
  </div>
</template>

动态显示右键菜单

<template>
  <div class="desktop" data-role="desktop" @contextmenu-showbefore="showbefore">

  </div>
</template>

import Vue from 'vue'

import contextmenu from 'suwis-contextmenu'

let options = {
  background: #fff,
  hover: #efefef,
  registry: {
    // 桌面
    desktop: [{
      key: 'toggleFullScreen',
      value: '进入全屏'
    }, {
      key: 'refresh',
      value: '刷新'
    }, {
      key: 'nextbg',
      value: '下一张壁纸'
    }, {
      key: 'prevbg',
      value: '上一张壁纸'
    }, {
      key: 'personalized',
      value: '个性化设置'
    }]
  }
}

Vue.use(contextmenu, options)
export deafult {
  methods: {
    showbefore(e) {
      // 获取菜单
      let menus = e.detail

      menus.forEach(item => {
        // 隐藏
        item.visible = false
        // 禁用
        item.disabled = true
      })
    }
  }
}