vue 时间插件-ag凯发k8国际
作者: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: '' // 提示文本});在页面中显示一个 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 ssr》
《记一次vue3.0技术干货分享会》
《vue 3.x 如何有惊无险地快速入门「进阶篇」》
《「干货」微信支付前后端流程整理(vue node)》
《带你了解 vue-next(vue 3.0)之 炉火纯青「实践」》
《「干货」vue 高德地图实现页面点击绘制多边形及多边形切割拆分》
《「干货」vue element前端导入导出excel》
《「实践」deno bytes 模块全解析》
《细品pdf.js实践解决含水印、电子签章问题「vue篇」》
《基于vue element的后台管理系统ag凯发k8国际的解决方案》
《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
总结
以上是ag凯发k8国际为你收集整理的vue 时间插件_vue3 插件开发详解尝鲜版「值得收藏」的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇：
- 下一篇：