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

原文转载自 「淮城一只猫」 ( https://iiong.com/vue-right-click-use-tutorial/ ) By Jaxson Wang

预计阅读时间 0 分钟(共 0 个字, 0 张图片, 0 个链接)

前言

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

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

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

开发

之前没有关注过 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 周期所触发的条件执行相关函数。

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

网页的右键菜单不是必然存在的,没必要网页加载好就执行相关业务,所以这边我就采用了 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

more_vert