suwis-contextmenu/src/index.js

一个基于Web的vue右键菜单扩展

import menus from './menus'
import config from './config'
let $vm = {}
export default {
  install(Vue, opts) {
    // 混合注册菜单
    opts.registry = {
      ...config.registry,
      ...opts.registry
    }
    // 合并参数
    opts = Object.assign(config, opts || {})
    // console.log(opts, 'opts')
    // 实例化右键菜单模型
    let ctm = document.createElement('div')
    ctm.id = `suwis_ctm_${Date.now()}`
    document.body.appendChild(ctm)
    $vm = new Vue({
      render: h => h(menus, {
        props: {
          opts
        }
      })
    }).$mount('#' + ctm.id)
    // 关闭事件
    var close = () => {
      $vm.$children[0].hide()
      window.removeEventListener('click', close)
    }
    if (opts.activation.rightclick) {
      console.log('注册右键菜单')
      window.oncontextmenu = (e) => {
        // 取消默认的浏览器自带右键 很重要！！
        e.preventDefault()
        $vm.$children[0].show(e)
        // 关闭右键菜单，很简单
        window.addEventListener('click', close)
      }
    }
    // 单击显示
    if (opts.activation.click) {
      document.body.addEventListener('click', (e) => {
        e.preventDefault()
        $vm.$children[0].visible ? close() : $vm.$children[0].show(e)
      })
    }
  }
}