VUE中toast的使用与开发

时间：2024-03-12 18:23:19

　　在这篇文章中介绍了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 来安装了！ 

 

相关文章