关于Toast组件的使用,主要有两种方式:分别是普通组件的封装方式;和以插件的方式。
一、普通方式:
1、创建Toast组件
<div class="toast" v-show="isShow">
<div>{{message}}</div>
</div>
此方式需要通过传入参数,来控制Toast组件。参数可以有message(显示的内容)和isShow(是否显示)。
2、样式居中
.toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 8px 10px; z-index: 999; color: #fff; background-color: rgba(0,0,0,.75); }
3、在父组件进行内容传递
this.addCart(product).then(res => { console.log(res); this.show = true; this.message = res; setTimeout(() => { // 让toast不显示,改变其属性 this.show = false; this.message = '' }, 1500)
总结:此方式属于麻烦的类型,可移植性差,复用性差。当所需要的地方不多,可以使用这种方式。
二、插件方式
因为普通方式不再满足多地方的使用,所以推荐使用插件的方式。
1、也需要创建Toast组件,但是不需要接受参数传输,借助方法的调用来使用此组件。
组件内的方法:
show(message, duration) { this.isShow = true; this.message = message; setTimeout(() => { this.isShow = false; this.message = '' }, duration) }
2、步骤:
①在mainjs中安装toast插件;
import toast from "components/common/toast"; Vue.use(toast)
②在toast文件中将toast进行挂载
obj.install = function (Vue) { // 1、创建组件构造器,用于之后创建组件,然后将组件挂载到对应的元素上去,挂载上去后就可以添加组件元素 const toastConstructor = Vue.extend(Toast); // 2、使用new的方式,根据组件构造器,创建一个组件对象 const toast = new toastConstructor(); // 3、将组件对象手动的挂载到某一个元素上 toast.$mount(document.createElement('div')) // 挂载到自创的div元素上 // 4、toast.$el对应的就是div document.body.appendChild(toast.$el) Vue.prototype.$toast = toast;
③使用
this.$toast.show(res, 2000)
总结:toast的普通方式简单,但是实用性不高,无法进行良好的复用;toast插件方式有些复杂,首先需要将Toast用于创建组件构造器,根据组件构造器创建组件对象,然后将组件对象手动挂载到某一个元素上(可以自己创建),然后将toast追加到body中,最后将toast挂载到Vue原型上。
总之,各有各的好处,推荐使用插件方式