VUE中toast的使用与开发
在这篇文章中介绍了toast是什么,这篇文章主要介绍toast的开发与使用。
开发
Vuejs很流行,并且官方也给出了路由插件vue-router、数据管理插件vuex,但是我们仅仅停留在了使用的阶段,如果能够尝试一下自己开发,并且npm上传,那么对于个人的进步我想还是很大的。
什么是插件
Vue.js的插件有一个公开方法install, 这个方法的第一个参数是Vue构造器,第二个参数是一个可选的选项对象。 如// MyPlugin就是插件的名称, 所有的插件都需要使用install这个公开方// 第一个参数是Vue构造器,因此我们可以在这个方法中使用Vue, 第二个参数是一个选项对象。
MyPlugin.install = function (Vue, options) { Vue.myGlobalMethod = function () { // 1. 添加全局方法或属性,如: vue-custom-element // 逻辑... }
// 这里通过 Vue.directive 来进行自定义指令。
// 其中my-derective就是指令的名称。
// bind是自定义指令提供的钩子函数。而el、binding、vnodes、oldVnode都是钩子函数绑定的参数
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自定义指令)
下面要讲的 vue-toast 插件就是通过添加实例方法来实现的, 比如下面的这个例子,首先新建一个js文件来编写插件: speak.js
var Speak = {}; Speak.install = function (Vue, options) { Vue.prototype.$words = "Hello, John!" } module.exports = Speak;
即 Speak 就是插件的名称,我们绑定了一个$words 属性。 定义好了之后,导出。
在main.js中,需要导入 Speak.js 并且通过全局方法 Vue.use() 来使用插件。(比如我们所用的vuex和vue-router都是先在 main.js 中导入,然后必须使用 Vue.use)。
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import router from './router' import store from './store/'
import Speak from './assets/js/speak.js' Vue.use(Speak) Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, store, })
最后,我们就可以在组件中来获取到该插件定义的$words 属性了,
// Personal.vue export default { created(){ alert(this.$words); // Hello John! } }
然后我们我就可以发现这个组件生效了。
开发 vue-toast
实现需求:
同之前举例一样,在main.js引入之后可以在组件中通过调用 this.$toast("网络请求失败") 来弹出提示, 默认在底部显示,我们还可以通过 this.$toast.top() 或者 this.$toast.center() 等方法来实现在其他位置的显示。
思路:
其实toast还是很简单的,就是提示消息,并在一定时间内自动清除,所以,需要提示的时候,我们可以在body中添加一个div来显示提示信息, 而不同的位置通过添加不同的类名定位。
start!
// toast.js var Toast = {}; Toast.install = function (Vue, options) { Vue.prototype.$toast = (tips) => { let toastTpl = Vue.extend({ // 1、创建构造器,定义好提示信息的模板 template: '<div class="vue-toast">' + tips + '</div>' }); let tpl = new toastTpl().$mount().$el; // 2、创建实例,挂载到文档以后的地方 document.body.appendChild(tpl); // 3、把创建的实例添加到body中 setTimeout(function () { // 4、延迟2.5秒后移除该提示 document.body.removeChild(tpl); }, 2500) } } module.exports = Toast;
通过上面寥寥十几行代码我们就实现了this.$toast,接下来就可以显示不同的位置。
即首先定义Toast这个插件,然后在Vue上定义实例方法 toast , 这个方法中,我们首先创建一个构造器,然后通过new来实例化一个实例并挂在到$el(即Vue挂载的元素)上, 这样,一个定义好的模板就实现了,接着我们将它插入到DOM中,等到一段时间之后 (如2500ms) 就移除这个div。 而其中的tips可以是一个字符串,即我们希望提示的信息。这样我们就可以通过 this.$toast("新建地址成功!") 来使用 toast 了!
补充知识:
// toast.js ['bottom', 'center', 'top'].forEach(type => { Vue.prototype.$toast[type] = (tips) => { return Vue.prototype.$toast(tips,type) } })
这里,我们将bottom、center、top所组成的数组进行遍历来设置 $toast[type]方法,这样就是我们就可以通过$toast.type来调用了, 而$toast[type]方法显然都是一个函数,他们接受一个参数tips, 最后返回一个对应的方法Vue.prototype.$toast(tips,type)。
可以看到这时候我们就需要重新修改一个$toast方法了:
Vue.prototype.$toast = (tips,type) => { // 添加 type 参数 let toastTpl = Vue.extend({ // 模板添加位置类 template: '<div class="vue-toast toast-'+ type +'">' + tips + '</div>' }); ... }
这样,如果我们不传递参数,那么type就是undefined, 只要在类名中我们不设置 undefined相关的就可以了,而如果type是bottom之类的时候,我们在css中定义相关的样式,就可以正确显示了。
OK! 到这里,其实已经完成了大体框架的大部分了! 但是如果我希望默认在顶部显示,那么我每次都需要调用 this.$toast.top() 好像就太麻烦了, 另外,如果我们希望div停留的时间不是 2500ms 而是随着不同的需求而改变的呢? 这时候,其实我们可以利用之前所提到过的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 来安装了!