context-menu-for-vue

一款超简单的右键上下文插件

特点

没有任何配置

使用

安装插件

npm install context-menu-for-vue

引入

在main.js引入模块，并加载模块。注意了，必须想使用Vue.use加载才能正常使用，十分依赖vue。

import contextMenuForVue from 'context-menu-for-vue'
Vue.use(contextMenuForVue)

使用

<template>
  <div>
    <div v-contextmenu="options">触发</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          render: '上传', // 可以使用文本
          key: 'upload', // 传个key做为唯一值，不传使用index
          handle(option, event) { // 点击处理函数 第一个是当前选项，第二个是点击上下文
            console.log('上传', option, event)
          }
        },
        {
          render: <div>下载</div>, // 也可以使用jsx
          handle(option, event) { // jsx只是里层渲染，handle是必须的
            console.log('下载', option, event)
          }
        }
      ]
    }
  }
}
</script>