随着 Vue.js 愈来愈火,Vue.js 的相关插件也在不断的被贡献出来,数不胜数。好比官方推荐的 vue-router、vuex 等,都是很是优秀的插件。可是咱们更多的人还只停留在使用的阶段,比较少本身开发。因此接下来会经过一个简单的 vue-toast 插件,来了解掌握插件的开发和使用。javascript
原文做者:林鑫,做者博客:https://github.com/lin-xin/blogvue
想要开发插件,先要认识一个插件是什么样子的。java
Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象:node
MyPlugin.install = function (Vue, options) { Vue.myGlobalMethod = function () { // 1. 添加全局方法或属性,如: vue-custom-element // 逻辑... } Vue.directive('my-directive', { // 2. 添加全局资源:指令/过滤器/过渡等,如 vue-touch bind (el, binding, vnode, oldVnode) { // 逻辑... } ... }) Vue.mixin({ created: function () { // 3. 经过全局 mixin方法添加一些组件选项,如: vuex // 逻辑... } ... }) Vue.prototype.$myMethod = function (options) { // 4. 添加实例方法,经过把它们添加到 Vue.prototype 上实现 // 逻辑... } }
接下来要讲到的 vue-toast 插件则是经过添加实例方法实现的。咱们先来看个小例子。先新建个js文件来编写插件:toast.jsgit
// toast.js var Toast = {}; Toast.install = function (Vue, options) { Vue.prototype.$msg = 'Hello World'; } module.exports = Toast;
在 main.js 中,须要导入 toast.js 而且经过全局方法 Vue.use() 来使用插件:github
// main.js import Vue from 'vue'; import Toast from './toast.js'; Vue.use(Toast);
而后,咱们在组件中来获取该插件定义的 $msg 属性。vue-router
// App.vue export default { mounted(){ console.log(this.$msg); // Hello World } }
能够看到,控制台成功的打印出了 Hello World 。既然 $msg 能获取到,那么咱们就能够来实现咱们的 vue-toast 插件了。vuex
需求:在组件中经过调用 this.$toast('网络请求失败') 来弹出提示,默认在底部显示。能够经过调用 this.$toast.top() 或 this.$toast.center() 等方法来实如今不一样位置显示。npm
整理一下思路,弹出提示的时候,我能够在 body 中添加一个 div 用来显示提示信息,不一样的位置我经过添加不一样的类名来定位,那就能够开始写了。网络
// toast.js var Toast = {}; Toast.install = function (Vue, options) { Vue.prototype.$toast = (tips) => { let toastTpl = Vue.extend({ // 一、建立构造器,定义好提示信息的模板 template: '<div class="vue-toast">' + tips + '</div>' }); let tpl = new toastTpl().$mount().$el; // 二、建立实例,挂载到文档之后的地方 document.body.appendChild(tpl); // 三、把建立的实例添加到body中 setTimeout(function () { // 四、延迟2.5秒后移除该提示 document.body.removeChild(tpl); }, 2500) } } module.exports = Toast;
好像很简单,咱们就实现了 this.$toast() ,接下来显示不一样位置。
// toast.js ['bottom', 'center', 'top'].forEach(type => { Vue.prototype.$toast[type] = (tips) => { return Vue.prototype.$toast(tips,type) } })
这里把 type 传给 $toast 在该方法里进行不一样位置的处理,上面说了经过添加不一样的类名(toast-bottom、toast-top、toast-center)来实现,那 $toast 方法须要小小修改一下。
Vue.prototype.$toast = (tips,type) => { // 添加 type 参数 let toastTpl = Vue.extend({ // 模板添加位置类 template: '<div class="vue-toast toast-'+ type +'">' + tips + '</div>' }); ... }
好像差很少了。可是若是我想默认在顶部显示,我每次都要调用 this.$toast.top() 好像就有点多余了,我能不能 this.$toast() 就直接在我想要的地方呢?还有我不想要 2.5s 后才消失呢?这时候注意到 Toast.install(Vue,options) 里的 options 参数,咱们能够在 Vue.use() 经过 options 传进咱们想要的参数。最后修改插件以下:
var Toast = {}; Toast.install = function (Vue, options) { let opt = { defaultType:'bottom', // 默认显示位置 duration:'2500' // 持续时间 } for(let property in options){ opt[property] = options[property]; // 使用 options 的配置 } Vue.prototype.$toast = (tips,type) => { if(type){ opt.defaultType = type; // 若是有传type,位置则设为该type } if(document.getElementsByClassName('vue-toast').length){ // 若是toast还在,则再也不执行 return; } let toastTpl = Vue.extend({ template: '<div class="vue-toast toast-'+opt.defaultType+'">' + tips + '</div>' }); let tpl = new toastTpl().$mount().$el; document.body.appendChild(tpl); setTimeout(function () { document.body.removeChild(tpl); }, opt.duration) } ['bottom', 'center', 'top'].forEach(type => { Vue.prototype.$toast[type] = (tips) => { return Vue.prototype.$toast(tips,type) } }) } module.exports = Toast;
这样子一个简单的 vue 插件就实现了,而且能够经过 npm 打包发布,下次就可使用 npm install 来安装了。