> ## Content Index
> Fetch the complete content index at: https://iiong.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# 写了一个插件：Vue-Right-Click
- URL: https://iiong.com/vue-right-click-use-tutorial/
- Published: 2020-06-09T14:54:02.000Z
- Updated: 2026-06-22T15:29:57.000Z
- Description: 在写插件前想过插件架构（当写完插件浏览同类型插件时候证实我的想法），第一反应就是使用组件形式去编写，但实际上开发我感觉工作量不比写个右击菜单业务量少，所以这边我采用了自定义指令完成我的需求。
- Author: 淮城一只猫
- Tags: Vue.js, 奇技淫巧

### 前言

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

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

### 开发

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

#### 准备

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

```javascript
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` 类库：[构建类库](%5Bhttps://cli.vuejs.org/zh/guide/build-targets.html#%E5%BA%93%5D%28https://cli.vuejs.org/zh/guide/build-targets.html#%E5%BA%93%29) ：

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

```

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

### 参考文档

- [自定义指令](https://cn.vuejs.org/v2/guide/custom-directive.html?ref=iiong.com)

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

[Vue Right Click For Github](https://github.com/JaxsonWang/Vue-Right-Click?ref=iiong.com)

[Vue Right Click For NPM](https://www.npmjs.com/package/@jaxsonwang/vue-right-click?ref=iiong.com)