个人笔记_vuejs_Toast封装

关于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原型上。

总之，各有各的好处，推荐使用插件方式