写了一个插件:Vue-Right-Click
Jaxson Wang / / Vue.js / 阅读量

前言

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

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

开发

之前没有关注过 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 方法,该方法下有五个钩子函数,分别是 bindinsertedupdatecomponentUpdatedunbind ,各个代表 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

支付宝捐赠
请使用支付宝扫一扫进行捐赠
微信捐赠
请使用微信扫一扫进行赞赏
有 0 篇文章