写了一个插件:Vue-Right-Click – 淮城一只猫
source link: https://iiong.com/vue-right-click-use-tutorial/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
最近俩个月太忙了,没时间更新新博文,也不知道该写啥。最近在公司遇到一个业务,需要在网页劫持鼠标右键菜单,并做到和电脑桌面一样那么灵活,所以抽出俩三个小时写出这个插件。
在写插件前想过插件架构(当写完插件浏览同类型插件时候证实我的想法),第一反应就是使用组件形式去编写,但实际上开发我感觉工作量不比写个右击菜单业务量少,所以这边我采用了 自定义指令
完成我的需求。
之前没有关注过 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"
这样就不需要额外的构建工具进一步打包了,并且以上打包的类库兼容不同的标准版本,还是不错的。
最后欢迎大家来试试我的新插件,如有问题可以反馈哦:
Recommend
-
16
Webpack5 上手 – 淮城一只猫 Webpack5 上手 Jaxson Wang / 2020-12-09 / 奇淫技巧 / 阅读量 之前很多项目都用到 Webpack
-
5
当 Vue3 遇上 TypeScript 和 TSX – 淮城一只猫 Vue3 体验 Jaxson Wang / 2020-09-17 / 编程技术 / 阅读量 3625...
-
5
NUC8 开箱体验报道 – 淮城一只猫 NUC8 开箱体验报道 Jaxson Wang / 2020-11-30 / 生活杂记 / 阅读量 148...
-
10
ES6 中的 Proxy 的一些奇淫技巧 – 淮城一只猫 ES6 中的 Proxy 的一些奇淫技巧 Jaxson Wang / 2020-04-15 / 编程技术 / 阅读量
-
23
使用 OpenCore 引导黑苹果 – 淮城一只猫 使用 OpenCore 引导黑苹果 Jaxson Wang / 2020-04-12 / 生活杂记 / 阅读量
-
2
写了一个drone编译告警的插件 发表于 2022-01-12...
-
40
想必大家都在关注这两天的上海疫情,情况的发展几乎超出了所有人的预期。虽然我家提前准备了一些物资,不过还是大大低估了疫情发展的速度,随着一天天足不出户,先前准备的物资也越来越少。
-
2
切 host 对于平常开发来说再正常不过了,可是「切 host 难」的问题一直没解决,因为手动修改 host 文件会有很多(系统dns、浏览器)缓存问题。经常听到xx说「我这是好的呀,你 host 有问题吧…」 在 windows 下我一直使用 fiddler 来切换 host,很多人可...
-
2
摸鱼写了一个番茄时钟 VS Code 插件来摸鱼(劳逸结合) V2EX = way to explore V2EX 是一个关于分享和探索的地方 爱意满满的作品展示区。...
-
2
V2EX › 分享创造 写了一个 obsidian 插件,能够把 obsidian 笔记转换为 hugo blog
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK