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

// 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>

// 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);