<template>
?? ?<div >
?? ??? ?<div class="alert">
? ? ? ? <div class="alert-main" v-for="item in notices" :key="item.name">
? ? ? ? ? ? <div class="alert-content">{{ item.content }}</div>
? ? ? ? </div>
? ? </div>
?? ?</div >
</template>

<script>
? ?//多個(gè)提示框命名
? ? let seed = 0;
? ? function getUuid() {
? ? ? ? return 'alert_' + (seed++);
? ? }
?? ?export default {
?? ??? ?data() {
?? ??? ??? ?return {
? ? ? ? ? ? ? ? notices: []//多個(gè)提示框保存至數(shù)組
?? ??? ??? ?}
?? ??? ?}，
?? ??? ?methods:{
?? ??? ? ?add(notice) {
? ? ? ? ? ? ? ? const name = getUuid();//獲取當(dāng)前提示框名稱(chēng)
? ? ? ? ? ? ? ? //Object.assign 淺拷貝不會(huì)跳過(guò)那些值為 [null] 或 [undefined]的源對(duì)象
? ? ? ? ? ? ? ? // Object.assign(target, ...sources);target: 目標(biāo)對(duì)象，sources：源對(duì)象
? ? ? ? ? ? ? ? let _notice = Object.assign({
? ? ? ? ? ? ? ? ? ? name: name
? ? ? ? ? ? ? ? }, notice);
? ? ? ? ? ? ? ? //將當(dāng)前提示框標(biāo)簽保存到notices
? ? ? ? ? ? ? ? this.notices.push(_notice);
? ? ? ? ? ? ? ? // 定時(shí)移除，單位：秒
? ? ? ? ? ? ? ? const time= notice.time|| 1.5;
? ? ? ? ? ? ? ? //1.5s后調(diào)用移除方法
? ? ? ? ? ? ? ? setTimeout(() => {
? ? ? ? ? ? ? ? ? ? this.remove(name);
? ? ? ? ? ? ? ? }, time* 1000);
? ? ? ? ? ?},
? ? ? ? ? remove(name) {
? ? ? ? ? ? ? ? const notices = this.notices;
? ? ? ? ? ? ? ? for (let i = 0; i < notices.length; i++) {
? ? ? ? ? ? ? ? ? ? if (notices[i].name === name) {
? ? ? ? ? ? ? ? ? ? ? ? this.notices.splice(i, 1);
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ?}
?? ?}
</script>

<style lang="scss">
</style>

import Vue from 'vue'
import Alter from '/components/Alter/Alter.vue'
//Alter添加新屬性，newInstance是個(gè)函數(shù)需求參數(shù)為properties
Alter.newInstance=properties=>{
?? ?const props=properties || {};
?? ?//創(chuàng)建一個(gè)Vue組件對(duì)象
?? ?const Instance=new Vue({
?? ??? ?data:props,
?? ??? ?render(h){
?? ??? ??? ?return h(Alter,{
?? ??? ??? ??? ?props:props
?? ??? ??? ?})
?? ??? ?}
?? ?});
?? ?//等待接口調(diào)用的時(shí)候在實(shí)例化組件,避免進(jìn)入頁(yè)面就直接掛載到body上
?? ?const component=Instance.$mount();
?? ?//實(shí)例化一個(gè)組件,然后掛載到body上
?? ?document.body.appendChild(component.$el);
?? ?//通過(guò)閉包維護(hù)alter組件的引用
?? ?const alter=Instance.$children[0];
?? ?return{
?? ??? ?//Alter組件對(duì)外暴露的兩個(gè)方法
?? ??? ?add(noticeProps){
?? ??? ??? ?alter.add(noticeProps);
?? ??? ?},
?? ??? ?remove(name){
?? ??? ??? ?alter.remove(name);
?? ??? ?}
?? ?}
}
//提示單例
let messageInstance;
function getMessageInstance(){
?? ?messageInstance=messageInstance || Alter.newInstance();
?? ?return messageInstance;
}
//定義函數(shù)實(shí)現(xiàn)
function notice({time='',content=''}){
?? ?let instance=getMessageInstance();
?? ?instance.add({
?? ??? ?time:1.5,
?? ??? ?content:''
?? ?})
}
//公布方法
export default{
?? ?info(options){
?? ??? ?return notice(options);
?? ?}
}

import alert from './alert.js'
// 掛載到Vue原型上
Vue.prototype.$Alert = alert
// 然后在組件中使用
this.$Alert.info({time: 1.5, content: '提示'})