Vue.js 插件开发详解

开发 开发工具
随着 Vue.js 越来越火,Vue.js 的相关插件也在不断的被贡献出来,数不胜数。比如官方推荐的 vue-router、vuex 等,都是非常优秀的插件。但是我们更多的人还只停留在使用的阶段,比较少自己开发。

 

[[195748]]

随着 Vue.js 越来越火,Vue.js 的相关插件也在不断的被贡献出来,数不胜数。比如官方推荐的 vue-router、vuex 等,都是非常优秀的插件。但是我们更多的人还只停留在使用的阶段,比较少自己开发。所以接下来会通过一个简单的 vue-toast 插件,来了解掌握插件的开发和使用。

认识插件

想要开发插件,先要认识一个插件是什么样子的。

Vue.js 的插件应当有一个公开方法 install 。这个方法的***个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象:

  1. MyPlugin.install = function (Vue, options) { 
  2.   Vue.myGlobalMethod = function () {  // 1. 添加全局方法或属性,如: vue-custom-element 
  3.     // 逻辑... 
  4.   } 
  5.   Vue.directive('my-directive', {  // 2. 添加全局资源:指令/过滤器/过渡等,如 vue-touch 
  6.     bind (el, binding, vnode, oldVnode) { 
  7.       // 逻辑... 
  8.     } 
  9.     ... 
  10.   }) 
  11.   Vue.mixin({ 
  12.     created: function () {  // 3. 通过全局 mixin方法添加一些组件选项,如: vuex 
  13.       // 逻辑... 
  14.     } 
  15.     ... 
  16.   }) 
  17.   Vue.prototype.$myMethod = function (options) {  // 4. 添加实例方法,通过把它们添加到 Vue.prototype 上实现 
  18.     // 逻辑... 
  19.   } 

接下来要讲到的 vue-toast 插件则是通过添加实例方法实现的。我们先来看个小例子。先新建个js文件来编写插件:toast.js

  1. // toast.js 
  2. var Toast = {}; 
  3. Toast.install = function (Vue, options) { 
  4.     Vue.prototype.$msg = 'Hello World'
  5. module.exports = Toast; 

在 main.js 中,需要导入 toast.js 并且通过全局方法 Vue.use() 来使用插件:

  1. // main.js 
  2. import Vue from 'vue'
  3. import Toast from './toast.js'
  4. Vue.use(Toast); 

然后,我们在组件中来获取该插件定义的 $msg 属性。

  1. // App.vue 
  2. export default { 
  3.     mounted(){ 
  4.         console.log(this.$msg);         // Hello World 
  5.     } 

可以看到,控制台成功的打印出了 Hello World 。既然 $msg 能获取到,那么我们就可以来实现我们的 vue-toast 插件了。

开发 vue-toast

需求:在组件中通过调用 this.$toast(‘网络请求失败’) 来弹出提示,默认在底部显示。可以通过调用 this.$toast.top() 或 this.$toast.center() 等方法来实现在不同位置显示。

整理一下思路,弹出提示的时候,我可以在 body 中添加一个 div 用来显示提示信息,不同的位置我通过添加不同的类名来定位,那就可以开始写了。

  1. // toast.js 
  2. var Toast = {}; 
  3. Toast.install = function (Vue, options) { 
  4.     Vue.prototype.$toast = (tips) => { 
  5.         let toastTpl = Vue.extend({     // 1、创建构造器,定义好提示信息的模板 
  6.             template: '<div class="vue-toast">' + tips + '</div>' 
  7.         }); 
  8.         let tpl = new toastTpl().$mount().$el;  // 2、创建实例,挂载到文档以后的地方 
  9.         document.body.appendChild(tpl);     // 3、把创建的实例添加到body中 
  10.         setTimeout(function () {        // 4、延迟2.5秒后移除该提示 
  11.             document.body.removeChild(tpl); 
  12.         }, 2500) 
  13.     } 
  14. module.exports = Toast; 

好像很简单,我们就实现了 this.$toast() ,接下来显示不同位置。

  1. // toast.js 
  2. ['bottom''center''top'].forEach(type => { 
  3.     Vue.prototype.$toast[type] = (tips) => { 
  4.         return Vue.prototype.$toast(tips,type) 
  5.     } 
  6. }) 

这里把 type 传给 $toast 在该方法里进行不同位置的处理,上面说了通过添加不同的类名(toast-bottom、toast-top、toast-center)来实现,那 $toast 方法需要小小修改一下。

  1. Vue.prototype.$toast = (tips,type) => {     // 添加 type 参数 
  2.     let toastTpl = Vue.extend({             // 模板添加位置类 
  3.         template: '<div class="vue-toast toast-'+ type +'">' + tips + '</div>' 
  4.     }); 
  5.     ... 

好像差不多了。但是如果我想默认在顶部显示,我每次都要调用 this.$toast.top() 好像就有点多余了,我能不能 this.$toast() 就直接在我想要的地方呢?还有我不想要 2.5s 后才消失呢?这时候注意到 Toast.install(Vue,options) 里的 options 参数,我们可以在 Vue.use() 通过 options 传进我们想要的参数。***修改插件如下:

  1. var Toast = {}; 
  2. Toast.install = function (Vue, options) { 
  3.     let opt = { 
  4.         defaultType:'bottom',   // 默认显示位置 
  5.         duration:'2500'         // 持续时间 
  6.     } 
  7.     for(let property in options){ 
  8.         opt[property] = options[property];  // 使用 options 的配置 
  9.     } 
  10.     Vue.prototype.$toast = (tips,type) => { 
  11.         if(type){ 
  12.             opt.defaultType = type;         // 如果有传type,位置则设为该type 
  13.         } 
  14.         if(document.getElementsByClassName('vue-toast').length){ 
  15.             // 如果toast还在,则不再执行 
  16.             return
  17.         } 
  18.         let toastTpl = Vue.extend({ 
  19.             template: '<div class="vue-toast toast-'+opt.defaultType+'">' + tips + '</div>' 
  20.         }); 
  21.         let tpl = new toastTpl().$mount().$el; 
  22.         document.body.appendChild(tpl); 
  23.         setTimeout(function () { 
  24.             document.body.removeChild(tpl); 
  25.         }, opt.duration) 
  26.     } 
  27.     ['bottom''center''top'].forEach(type => { 
  28.         Vue.prototype.$toast[type] = (tips) => { 
  29.             return Vue.prototype.$toast(tips,type) 
  30.         } 
  31.     }) 
  32. module.exports = Toast; 

这样子一个简单的 vue 插件就实现了,并且可以通过 npm 打包发布,下次就可以使用 npm install 来安装了。

源码地址:vue-toast

【本文为51CTO专栏作者“林鑫”的原创稿件,转载请通过微信公众号联系作者获取授权】

戳这里,看该作者更多好文

责任编辑:武晓燕 来源: 51CTO专栏
相关推荐

2016-11-01 19:10:33

vue.js前端前端框架

2024-02-04 13:36:00

2018-04-04 10:32:13

前端JavascriptVue.js

2023-03-29 14:25:08

Vue.js前端框架

2016-11-04 19:58:39

vue.js

2017-09-14 13:48:20

Vue.js机制应用

2017-07-11 18:00:21

vue.js数据组件

2017-07-20 11:18:22

Vue.jsMVVMMVC

2022-01-19 22:18:56

Vue.jsVue SPA开发

2021-01-22 11:47:27

Vue.js响应式代码

2017-07-14 10:10:08

Vue.jsMixin

2020-09-07 14:40:20

Vue.js构建工具前端

2016-09-21 13:32:13

JavascriptWeb前端

2020-09-16 06:12:30

Vue.js 3.0Suspense组件前端

2019-07-26 14:40:58

Vue.jsSocket.IO前端

2017-08-30 17:10:43

前端JavascriptVue.js

2024-01-18 11:50:28

2023-03-16 14:29:48

Vue.js测试

2022-04-01 10:41:09

Vue.js开发工具

2017-09-12 09:50:08

JavaScriptEvent LoopVue.js
点赞
收藏

51CTO技术栈公众号