写了一个插件：Vue-Right-Click

淮城一只猫 • • Vue.js
阅读量 0 次 • 评论量 0 个

前言

最近俩个月太忙了，没时间更新新博文，也不知道该写啥。最近在公司遇到一个业务，需要在网页劫持鼠标右键菜单，并做到和电脑桌面一样那么灵活，所以抽出俩三个小时写出这个插件。

在写插件前想过插件架构（当写完插件浏览同类型插件时候证实我的想法），第一反应就是使用组件形式去编写，但实际上开发我感觉工作量不比写个右击菜单业务量少，所以这边我采用了 自定义指令 完成我的需求。

开发

之前没有关注过 Vue 插件开发，但 Vue 官网有文档描述，就花了一点时间去查阅。一开始想法把这个插件直接制作为组件形式，感觉使用插件的项目庞大起来并不好维护，所以采用了 指令 方式开发插件。

准备

其实开发插件很简单，就如下代码可以完成一个插件开发：

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或 property
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

这边我使用 directive 方法，该方法下有五个钩子函数，分别是 bind、inserted、update、componentUpdated 和 unbind ，各个代表 Vue 周期所触发的条件执行相关函数。

每个钩子函数都有相同的参数：

  • @param el 指令所绑定的元素，可以用来直接操作 DOM
  • @param binding 绑定元素属性对象集合
  • @param vnode Vue 编译生成的虚拟节点
  • @param oldVnode 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用

网页的右键菜单不是必然存在的，没必要网页加载好就执行相关业务，所以这边我就采用了 inserted 钩子函数进一步开发。

实现弹窗首先要做到如下：

  • 找到鼠标位置，即弹窗出现的位置
  • 插入右键菜单弹窗视图层
  • 点击莫某个菜单执行事件
  • 移除右键菜单弹窗
  • 注意：右键菜单在网页只能出现一次
  • ...

根据上诉列出来的需求再进一步开发。

逻辑

找到鼠标的位置很好找，因为上面的钩子函数提供了 el 参数，可以利用 el.oncontextmenu 的事件回调得到 offsetX/offsetY 的位置，这个位置就是鼠标点击的位置。然后在利用 el 插入 dom ，利用 dom 渲染 Vue 封装的弹窗界面组件，然后根据插件的传入的参数进行渲染菜单列表，这边不再详述，建议去查阅插件源码吧，当然如果你有什么更好的想法欢迎在文下留下留言哦。

打包

本来打包想使用 webpack 或者 rollup 构建工具进行打包，然后在 Vue-Cli 文档上发现 Cli 不仅仅可以用来构建 App 也可以用来构建 JavaScript 类库：构建类库 ：

"build:lib": "vue-cli-service build --target lib --name vue-right-click ./src/index.js"

这样就不需要额外的构建工具进一步打包了，并且以上打包的类库兼容不同的标准版本，还是不错的。

参考文档

最后欢迎大家来试试我的新插件，如有问题可以反馈哦：

Vue Right Click For Github

Vue Right Click For NPM

喵~