vue 实现pc端右键菜单展示

前因

学习下vue的指令模式，自定义指定

第一步：明确需求

因为时间紧迫，暂时只实现右键展示出菜单即可，像动态菜单，菜单事件等可以延后实现。

第二步：编写组件

编写简单的组件代码。

<template>
  <ul
    class="right-menu"
    :style="{
      left,
      top,
    }"
  >
    <li class="right-menu-item" v-for="item in menuList" :key="item">
      菜单-{{ item }}
    </li>
  </ul>
</template>
<script>
export default {
  name: 'right-menu',
  data () {
    return {
      menuList: [1, 2], // 这个数据后续可以通过vuex获取
      left: '',
      top: ''
    }
  },
  mounted () {
    console.log(this.left)
  }
};
</script>

<style scoped>
.right-menu {
  list-style: none;
  padding: 0 10px;
  width: 100px;
  background-color: #fbb;
  position: fixed;
}
.right-menu-item {
  line-height: 25px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}
.right-menu-item:last-child {
  border: 0;
}
</style>

编写指令代码

主要使用vue的directive方法。

import RightMenuSub from './../components/RightMenu/component/RightMenu'

 const RightMenuCtor = Vue.extend(RightMenuSub);
export default {
  install (Vue) {
    Vue.directive('right-click', {
      bind: function (el) {
      // 右键函数
        el.oncontextmenu = function (e) {
          const oX = e.clientX;
          const oY = e.clientY;
          // 获取到参数传递进去
          const RightMenuCom = new RightMenuCtor({
            data: {
              left: oX + 'px',
              top: oY + 'px'
            }
          }).$mount()
          document.body.append(RightMenuCom.$el)
          e.preventDefault(); // 阻止默认事件
        }
      }
    })
  }
}

测试使用

main.js中导入，使用vue的use函数安装。

import RightMenu from './directives/right-menu';
Vue.use(RightMenu);

直接挂载到需要监听右键的dom上。

<div id="app" v-right-click> </div>

总结

通过此次编写，学习到了oncontextmenu，以及自定义指令，以及组件的构造器传参。