@cj_zheng1023/vue2-contextmenu

a contextmenu component for vue2

Usage no npm install needed!

<script type="module">
  import cjZheng1023Vue2Contextmenu from 'https://cdn.skypack.dev/@cj_zheng1023/vue2-contextmenu';
</script>

README

vue2-contextmenu

安装

yarn add @cj_zheng1023/vue2-contextmenu

npm install @cj_zheng1023/vue2-contextmenu

使用

  1. 引入库和样式

    import Contextmenu from '@cj_zheng1023/vue2-contextmenu'
    import '@cj_zheng1023/vue2-contextmenu/dist/styles/styles.css'
    Vue.use(Contextmenu)
    
  2. vue组件

    <temlate>
      <div @contextmenu.prevent="contextmenu">
        <contextmenu @close="visible = false" :menus="menus" :visible="visible" :x="x" :y="y">
        </contextmenu>
        ... ...
        ... ...
      </div>
    </temlate>
    <script>
    export default {
      data() {
        return {
          visible: false,
          menus: [{
            label: '清除',
            icon: ['ns', 'ns-clear'],
            disabled: true,
            action: _ => {
              alert('copy')
            }
          }, {
            label: '打印',
            icon: ['ns', 'ns-print'],
            divide: true,
            action: _ => {
              alert('paste')
            }
          }, {
            label: '菜单',
            icon: ['ns', 'ns-history'],
            children: [{
                label: '菜单1',
                icon: ['ns', 'ns-history']
              }, {
                label: '菜单2',
                icon: ['ns', 'ns-history']
            }]
          }],
          x: 0,
          y: 0
        }
      },
      methods: {
        contextmenu(e) {
          this.x = e.clientX
          this.y = e.clientY
          this.visible = true
        }
      }
    }
    </script>
    

开发

yarn dev

npm run dev

构建

yarn build

npm run build