插件也是组件化的一部分。今天来写一个 toast 插件。
什么是插件？其实 vue-router 就是 Vue 的一个插件，插件通常用来为 Vue 添加全局功能。
今天的 toast 就是一个全局要使用的功能，比如用户下单时对用户进行提示，或者在用户删除操作时对用户进行提示。
这个 toast 的功能点是
- 显示特定信息
- 在特定时间内销毁
demwwo.gif
当然可以使用组件化的思想封装一个toast组件。
比如像这样 Vue 组件 | 如何从零封装一个tabbar组件，从这里我们可以知道流程是下面的样子。
- 编写组件
- 导入组件
- 将值传给组件
- 注册组件
- 使用组件
分散
这种方式一是步骤多，二是使用组件时代码分散，代码要写在文件的不同部分。使用时有点麻烦。要照顾数据和 DOM，有没有可能只关注数据，这里是要展示的信息和展示的时间。
使用过 vue-router 的，可以知道 vue-router 可以这样使用：
this.$router.push('/detail/' + this.goodsItem.iid)
如果我们可以这样使用 toast 就好了：
this.$toast.show('toast 加载成功' , 2000)
那么重点来了，搞一个插件的流程是什么？
首先，明确一点我们先将 DOM 搞出来，一个居中的框，里面有提示文字，不妨写在一个 Vue 文件中。
<!-- Toast.vue -->
<template>
<div class="toast" v-show="isShow">
<div>{{message}}</div>
</div>
</template>
<style scoped>
/* fixed 居中 */
.toast {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 8px 10px;
color: aliceblue;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.75);
}
</style>
下面是功能代码，一定时间消失，可以使用setTimeout()并设置默认事件2000毫秒。
<!-- Toast.vue -->
<script>
export default {
name: "Toast",
data() {
return {
message: "",
isShow: false
};
},
methods: {
show(message, duration = 2000) {
this.isShow = true;
this.message = message;
setTimeout(() => {
this.isShow = false;
this.message = "";
}, duration);
}
}
};
</script>
第一步创建组件成功，和组件化创建区别不大。
下面进入第二步，一开始就将 toast 组件的 模板 挂到 DOM 中，这样我们在使用插件时就不用管 DOM 了，也就是省了将标签写到 template 中的步骤，也是和组件化不同的重要一点。
// index.js
import Toast from './Toast'
const obj = {}
obj.install = function (Vue) {
console.log('toast install')
// 1.创建组件构造器
const toastContrustor = Vue.extend(Toast)
// 2.new，根据组件构造器，创建一个组件对象
const toast = new toastContrustor()
// 3.将组件对象挂载到元素上
toast.$mount(document.createElement('div'))
// 4.toast.$el对应的是div
document.body.appendChild(toast.$el)
Vue.prototype.$toast = toast
}
export default obj
到 main.js 中全局安装 toast 插件。
// main.js
import toast from 'components/common/toast'
// 安装toast插件
Vue.use(toast)
使用，随便使用：
this.$toast.show('toast 加载成功' , 2000)
this.$toast.show('cemcoe' , 4000)
这样使用起来就简单了。我们要使用相应功能时只用一句就搞定了，和组件化相比确实简洁了很多。
插件的使用场景是DOM样式变化不大的，并且会频繁使用的地方?！?/p>
当我们要实现轻提示功能时，只需传入要传入的展示信息和展示时间就好了。
