0.3.2 • Published 3 years ago

@cj_zheng1023/vue2-contextmenu v0.3.2

Weekly downloads
18
License
MIT
Repository
github
Last release
3 years ago

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
0.3.2

3 years ago

0.3.1

4 years ago

0.3.0

4 years ago

0.2.6

4 years ago

0.2.5

4 years ago

0.2.3

4 years ago

0.2.2

4 years ago

0.2.1

4 years ago

0.2.0

4 years ago

0.1.0

4 years ago