vue 时间插件_Vue3 插件开发详解尝鲜版「值得收藏」
作者:lishuai
转发链接:https://segmentfault.com/a/1190000022757326
前言
vue3.0-beta 版本已经发布了一段时间了,正式版本据说在年中发布(直播的时候说的是年中还是年终,网上传闻说是6月份)。嘴上说着学不动,身体却很诚实地创建一个vue3的项目,兴致勃勃地引入 vue2 插件的时候,眉头一皱,发现事情并没有那么简单。
更多的Vue实践知识点文章,请见本篇文章底部,有好东西等着你
浏览器无情地抛出了一个错误:
Uncaught TypeError: Cannot set property '$toast' of undefined
不是说兼容vue2的写法吗,插件不兼容,这是闹哪样?发下牢骚之后还是得解决问题。研究插件的代码,是这么实现的
var Toast = {};Toast.install = function (Vue, options) { Vue.prototype.$toast = 'Hello World';}module.exports = Toast;
vue2 插件的时候会暴露一个 install 方法,并通过全局方法 Vue.use() 使用插件。install 方法的第一个参数是 Vue 构造器,插件的方法就添加在 Vue 构造器的原型对象上。通过 new Vue() 实例化后,在组件中就能调用 this.$toast 使用组件了。(具体实现可以参考我之前的一篇文章:Vue.js 插件开发详解,下面也是基于这个插件demo对比修改)。
而 vue3 的 install 方法不是传入 Vue 构造器,没有原型对象,Vue.prototype 是 undefined,所以报错了。vue3 采用依赖注入的方式,在插件内部利用 provide 和 inject 并暴露出一个组合函数,在组件中使用。
插件实现
基本框架
下面先实现一个插件的基本框架。
import { provide, inject } from 'vue';const ToastSymbol = Symbol(); // 用Symbol创建一个唯一标识,多个插件之间不会冲突const _toast = () => {} // 插件的主体方法export function provideToast(config) { // 对外暴露的方法,将 _toast 方法提供给后代组件 provide(ToastSymbol, _toast);}export function useToast() { // 后代组件可以从该方法中拿到 toast 方法 const toast = inject(ToastSymbol); if (!toast) { throw new Error('error'); } return toast;}
组件使用
在 provideToast 方法中,提供了 _toast 方法,那在根组件中 调用 provideToast 方法,传入插件参数,子组件中就能使用 toast 功能了。
// app.vue 根组件import { provideToast } from 'vue2-toast';export default { setup() { provideToast({ width: '200px', // 配置toast宽度 duration: 2000 // 配置toast持续显示时长 }); }};
在 useToast 方法中,返回了 toast 方法,那在所有的后代组件中调用 useToast 方法,就能拿到 toast 方法了。
// child.vue 子组件import { useToast } from 'vue2-toast';export default { setup() { const Toast = useToast(); // 所有的子组件都要从useToast拿到toast方法 Toast('Hello World'); }};
数据响应
想要控制 toast DOM 元素的显示隐藏,以及提示文本的变化,需要创建响应式的数据,在 vue3 中可以通过 reactive 方法创建一个响应式对象。
const state = reactive({ show: true, // DOM元素是否显示 text: '' // 提示文本});
挂载DOM
在页面中显示一个 toast,那就免不了要创建一个 DOM 并挂载到页面中。在 vue2 中是通过Vue.extend 创建一个子类,将子类生成的实例挂载到某个元素中,而 vue3 中通过 createApp 方法来实现的。
const _toast = text => { state.show = true; state.text = text; toastVM = createApp({ setup() { return () => h('div', { style: { display: state.show ? 'block' : 'none' } // display 设置显示隐藏 }, state.text ); } }); toastWrapper = document.createElement('div'); toastWrapper.id = 'toast'; document.body.appendChild(toastWrapper); // 给页面添加一个节点用来挂载toast元素 toastVM.mount('#toast');};
完整示例
上面的每一步是这个插件的关键内容,接下来就是完善下细节,比如用户配置插件的全局参数,设置 toast 的样式,持续时间,显示位置等,这里就不一一细讲了,完整示例如下:
import { provide, inject, reactive, createApp, h } from 'vue';const ToastSymbol = Symbol();const globalConfig = { type: 'bottom', // toast位置 duration: 2500, // 持续时长 wordWrap: false, // 是否自动换行 width: 'auto' // 宽度};const state = reactive({ show: false, // toast元素是否显示 text: ''});let [toastTimer, toastVM, toastWrapper] = [null, null, null];const _toast = text => { state.show = true; state.text = text; if (!toastVM) { // 如果toast实例存在则不重新创建 toastVM = createApp({ setup() { return () => h( 'div', { // 这里是根据配置显示一样不同的样式 class: [ 'lx-toast', `lx-toast-${globalConfig.type}`, globalConfig.wordWrap ? 'lx-word-wrap' : '' ], style: { display: state.show ? 'block' : 'none', width: globalConfig.width } }, state.text ); } }); } if (!toastWrapper) { // 如果该节点以经存在则不重新创建 toastWrapper = document.createElement('div'); toastWrapper.id = 'lx-toast'; document.body.appendChild(toastWrapper); toastVM.mount('#lx-toast'); } if (toastTimer) clearTimeout(toastTimer); // 定时器,持续时长之后隐藏 toastTimer = setTimeout(() => { state.show = false; clearTimeout(toastTimer); }, globalConfig.duration);};export function provideToast(config = {}) { for (const key in config) { globalConfig[key] = config[key]; } provide(ToastSymbol, _toast);}export function useToast() { const toast = inject(ToastSymbol); if (!toast) { throw new Error('error'); } return toast;}
总结
与 vue2 的插件比较大不同点在于,需要用到 toast 的每个组件中,都需要引入 useToast 方法,看起来会有点麻烦。不过其实这也是 vue 组合式 API 的目的,让代码更可读、更容易被理解,清楚的知道这个方法就是来自这里。正如标题所示,这是尝鲜版,vue3 正式版还未发布,未来会不会有更多的插件形式,咋也不敢问,至少这种还是比较稳的。
推荐Vue学习资料文章:
《带你五步学会Vue SSR》
《记一次Vue3.0技术干货分享会》
《Vue 3.x 如何有惊无险地快速入门「进阶篇」》
《「干货」微信支付前后端流程整理(Vue+Node)》
《带你了解 vue-next(Vue 3.0)之 炉火纯青「实践」》
《「干货」Vue+高德地图实现页面点击绘制多边形及多边形切割拆分》
《「干货」Vue+Element前端导入导出Excel》
《「实践」Deno bytes 模块全解析》
《细品pdf.js实践解决含水印、电子签章问题「Vue篇」》
《基于vue + element的后台管理系统解决方案》
《Vue仿蘑菇街商城项目(vue+koa+mongodb)》
《基于 electron-vue 开发的音乐播放器「实践」》
《「实践」Vue项目中标配编辑器插件Vue-Quill-Editor》
《基于 Vue 技术栈的微前端方案实践》
《消息队列助你成为高薪 Node.js 工程师》
《Node.js 中的 stream 模块详解》
《「干货」Deno TCP Echo Server 是怎么运行的?》
《「干货」了不起的 Deno 实战教程》
《「干货」通俗易懂的Deno 入门教程》
《Deno 正式发布,彻底弄明白和 node 的区别》
《「实践」基于Apify+node+react/vue搭建一个有点意思的爬虫平台》
《「实践」深入对比 Vue 3.0 Composition API 和 React Hooks》
《前端网红框架的插件机制全梳理(axios、koa、redux、vuex)》
《深入Vue 必学高阶组件 HOC「进阶篇」》
《深入学习Vue的data、computed、watch来实现最精简响应式系统》
《10个实例小练习,快速入门熟练 Vue3 核心新特性(一)》
《10个实例小练习,快速入门熟练 Vue3 核心新特性(二)》
《教你部署搭建一个Vue-cli4+Webpack移动端框架「实践」》
《2020前端就业Vue框架篇「实践」》
《详解Vue3中 router 带来了哪些变化?》
《Vue项目部署及性能优化指导篇「实践」》
《Vue高性能渲染大数据Tree组件「实践」》
《尤大大细品VuePress搭建技术网站与个人博客「实践」》
《10个Vue开发技巧「实践」》
《是什么导致尤大大选择放弃Webpack?【vite 原理解析】》
《带你了解 vue-next(Vue 3.0)之 小试牛刀【实践】》
《带你了解 vue-next(Vue 3.0)之 初入茅庐【实践】》
《实践Vue 3.0做JSX(TSX)风格的组件开发》
《一篇文章教你并列比较React.js和Vue.js的语法【实践】》
《手拉手带你开启Vue3世界的鬼斧神工【实践】》
《深入浅出通过vue-cli3构建一个SSR应用程序【实践】》
《怎样为你的 Vue.js 单页应用提速》
《聊聊昨晚尤雨溪现场针对Vue3.0 Beta版本新特性知识点汇总》
《【新消息】Vue 3.0 Beta 版本发布,你还学的动么?》
《Vue真是太好了 壹万多字的Vue知识点 超详细!》
《Vue + Koa从零打造一个H5页面可视化编辑器——Quark-h5》
《深入浅出Vue3 跟着尤雨溪学 TypeScript 之 Ref 【实践】》
《手把手教你深入浅出vue-cli3升级vue-cli4的方法》
《Vue 3.0 Beta 和React 开发者分别杠上了》
《手把手教你用vue drag chart 实现一个可以拖动 / 缩放的图表组件》
《Vue3 尝鲜》
《总结Vue组件的通信》
《Vue 开源项目 TOP45》
《2020 年,Vue 受欢迎程度是否会超过 React?》
《尤雨溪:Vue 3.0的设计原则》
《使用vue实现HTML页面生成图片》
《实现全栈收银系统(Node+Vue)(上)》
《实现全栈收银系统(Node+Vue)(下)》
《vue引入原生高德地图》
《Vue合理配置WebSocket并实现群聊》
《多年vue项目实战经验汇总》
《vue之将echart封装为组件》
《基于 Vue 的两层吸顶踩坑总结》
《Vue插件总结【前端开发必备】》
《Vue 开发必须知道的 36 个技巧【近1W字】》
《构建大型 Vue.js 项目的10条建议》
《深入理解vue中的slot与slot-scope》
《手把手教你Vue解析pdf(base64)转图片【实践】》
《使用vue+node搭建前端异常监控系统》
《推荐 8 个漂亮的 vue.js 进度条组件》
《基于Vue实现拖拽升级(九宫格拖拽)》
《手摸手,带你用vue撸后台 系列二(登录权限篇)》
《手摸手,带你用vue撸后台 系列三(实战篇)》
《前端框架用vue还是react?清晰对比两者差异》
《Vue组件间通信几种方式,你用哪种?【实践】》
《浅析 React / Vue 跨端渲染原理与实现》
《10个Vue开发技巧助力成为更好的工程师》
《手把手教你Vue之父子组件间通信实践讲解【props、$ref 、$emit】》
《1W字长文+多图,带你了解vue的双向数据绑定源码实现》
《深入浅出Vue3 的响应式和以前的区别到底在哪里?【实践】》
《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》
《基于Vue/VueRouter/Vuex/Axios登录路由和接口级拦截原理与实现》
《手把手教你D3.js 实现数据可视化极速上手到Vue应用》
《吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【上】》
《吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【中】》
《吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】》
《Vue3.0权限管理实现流程【实践】》
《后台管理系统,前端Vue根据角色动态设置菜单栏和路由》
作者:lishuai
转发链接:https://segmentfault.com/a/1190000022757326
vue 时间插件_Vue3 插件开发详解尝鲜版「值得收藏」相关推荐
- DBA整理的万字详解MySQL性能优化,值得收藏!
点击关注公众号,实用技术文章及时了解 作者:LanceToBigData cnblogs.com/zhangyinhua/p/7620964.html 说起MySQL的查询优化,相信大家积累一堆技 ...
- 6000字长文,详解黑色产业链的「攻守道」
作者:独孤qiu败 全文共 5805 字 3 图,阅读需要 13 分钟 ---- / BEGIN / ---- 虽然过去了已经两三年,但是想起自己曾经经历过的一场跨度一年的促销活动,现在想起来依然受益 ...
- 万字详解 Linux 常用指令(值得收藏)
- GitHub App终于来了,iPhone用户可尝鲜,「同性交友」更加便捷
整理 | 夕颜 出品 | AI科技大本营(ID:rgznai100) [导读]据外媒 VentureBeat 报道,在 11 月 13 日举行的 GitHub Universe 上,微软宣布了面向程序 ...
- Android Studio 插件开发详解三:翻译插件实战
转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/78113868 本文出自[赵彦军的博客] 系列目录 Android Gradle使用 ...
- vue连接后端本地接口_详解vue配置后台接口方式
详解vue配置后台接口方式 在vueAdmin项目中有两种方式配置后端接口的方式,在此做下记录 第一种(代理方式) 在工程目录下 > config > index.js - 修改为如下配置 ...
- Android Studio 插件开发详解二:工具类
转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/78112856 本文出自[赵彦军的博客] 在插件开发过程中,我们按照开发一个正式的项 ...
- Android Studio 插件开发详解四:填坑
转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/78265540 本文出自[赵彦军的博客] 系列目录 Android Gradle使用 ...
- Android Studio 插件开发详解一:入门练手
转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/78112003 本文出自[赵彦军的博客] 系列目录 Android Gradle使用 ...
最新文章
- 浏览器如何渲染页面?
- access开发精要(2)-参照完整性
- The world at your fingertips — 天涯明月刀幕后(后记)
- 串口光猫设备结构及主要特点介绍
- oracle utf8 varchar,Oracle中字符集的类型决定varchar2的字符长度
- angular html清除元素,在Angular js中单击时删除HTML元素
- testflight怎么做版本更新_如何使用TestFlight进行App构建版本测试
- 电子邮件传输算法-Base64
- bnu 29064, 期望 水题
- DSP技术-2-DSP的C语言同主机C语言的主要区别在哪里?
- MAC中生成SSH key
- Mac 修改hosts文件
- 36.42. schemata
- google map
- [android开发]Animation动画的实现
- 门禁系统服务器 控制器 读卡器,门禁系统建设方案.docx
- 六个免费网站统计平台工具对比推荐 你的网站统计用哪个
- Python之基本数据类型
- Creating orkut style status update div-textbox using jQuery
- 各种奖项什么的英文对照
热门文章
- java 中IO流的概念
- QML控件拖动并靠边停留
- 【已解决】Android 如何让应用在后台运行
- leetcode(2)495——提莫攻击(C++),运算符优先级(+=,?,+,-)
- pycharm中导入包失败,如何设置外部模块的路径
- 组合电路Verilog的几种描述方式
- MySQL索引(B+Tree 索引、哈希索引、全文索引、 空间数据索引)、索引优化、优点、使用场景
- gcc / -E、-S、-c 和 -o
- CygWin / 安装软件包的方法
- Linux下getopt()函数的简单使用