封装一个的toast弹出框（vue项目）

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

逆风的方向，更适合飞翔

实现效果

一个简单的Toast插件，可以运用到不同的项目中，用来传达一些信息。

实现步骤

先写出一个toast组件

// Toast.vue
<template>
  <div id="toast" :class="[isActive ? 'active' : '', type]">
    {{ message }}
  </div>
</template>

<script>
export default {
  name: "Toast",
  data() {
    return {
      message: "",//传递的消息
      isActive: false,//是否处于活跃状态（显示在页面内）
      type: "",//消息样式
      timer1: null,
      timer2: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.isActive = true;
    });
    this.timer1 = setTimeout(() => {
      this.isActive = false;
    }, this.delayer);
    this.timer2 = setTimeout(() => {
      this.$destroy(true);//销毁vue实例
    }, this.delayer * 2);
  },
  destroyed() {
    this.$el.parentNode.removeChild(this.$el);//移除dom元素
    clearTimeout(this.timer1);
    clearTimeout(this.timer2);
  },
};
</script>

<style scoped>
#toast {
  position: fixed;
  top: -50px;
  left: 50%;
  transform: translate(-50%, 0);
  padding: 13px 20px;
  border-radius: 15px;
  z-index: 999;
  opacity: 0;
  transition: all 1s;
}
#toast.success {
  background-color: #f0f9eb;
  color: #67c23a;
}
#toast.error {
  background-color: #fef0f0;
  color: #f56c6c;
}
#toast.active {
  top: 30px;
  opacity: 1;
}
</style>

注意的点：toast消失后记得销毁vue实例，清空定时器，移除dom元素

封装成一个插件

Vue.extend( options )

• 参数：

  • {Object} options

• 用法： 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。 data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数
  vm.$mount( [elementOrSelector] )

• 参数：

  • {Element | string} [elementOrSelector]
  • {boolean} [hydrating]

• 返回值：vm - 实例自身

• 用法： 如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。

  如果没有提供 elementOrSelector 参数，模板将被渲染为文档之外的的元素，并且你必须使用原生 DOM API 把它插入文档中。

  这个方法返回实例自身，因而可以链式调用其它实例方法。

// index.js
import Toast from "./Toast.vue";
const obj = {};
obj.install = function(Vue) {

  //1. 创建组件构造器
  const toastContrustor = Vue.extend(Toast);
  
  Vue.prototype.$toast = function(message, type, delayer = 3000) {

    //2. new的方式，根据组件构造器，可以创建出来一个组件对象
    const toast = new toastContrustor();

    Object.assign(toast, { message, type, delayer });

    //3. 将组件对象手动的挂载到一个元素上面

    toast.$mount(document.createElement("div"));

    //4. toast.$el对应的就是div
    document.body.appendChild(toast.$el);
  };
};

export default obj;

//main.js
import toast from "components/common/toast";

Vue.use(toast);

文件结构

使用

this.$toast("hi,i am spiderman", "success", 5000);

this.$toast("hi,i am spiderman", "error", 5000);

日子常新，未来不远