//入口文件：main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import TMessage from '@/components/TMessage/TMessage.js';
 
import '@/assets/css/css.css'
 
Vue.config.productionTip = false
 
Vue.prototype.$message = TMessage;
 
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

//TMessage.js文件
import { createApp, createVNode, render } from 'vue'
import TMessage from '@/components/TMessage/TMessage.vue'
 
// 用于儲(chǔ)存多個(gè)實(shí)例
let instances = [];
 
function Message(data) {
 
    // 使用該方法組件（如Login）傳過(guò)來(lái)的數(shù)據(jù)沒(méi)有傳的變量需要有默認(rèn)值，否則是undefined傳給TMessage
    if (typeof data === 'string') {
        // Message("這是錯(cuò)誤的")，除了message，其他的設(shè)置默認(rèn)值
        data = {
            message: data,
            type: 'info',
        }
    }
    data = {
        ...data,
        // 設(shè)置具體data參數(shù)，根據(jù)傳入的顯示不同
        message: data.message ? data.message : '默認(rèn)提示信息',
        type: data.type ? data.type : 'info',
        center: data.center ? data.center : true,
        offset: data.offset ? data.offset : 20,
        duration: data.duration ? data.duration : 1000
    }
 
    // 用于處理所有消息提示框消失后，其他提示框的位置(需要在TMessage.vue中調(diào)用)
    data.onClose = function() {
        Message.close(msgNode);
 
    }
 
    // 處理多個(gè)實(shí)例之間間距
    let offset = data.offset || 20;
    // 用于改變后的offset值記錄
    let offsetTop = offset;
    console.log(instances.length);
 
    //  * 0: 20
    //  * 1: 20 40 20(第0個(gè)的offset + 第0個(gè)的div高度(offsetHeight) + 第1個(gè)的offset 20)
    instances.forEach((item) => {
        // 直接通過(guò)item獲取的實(shí)例offsetHeight不準(zhǔn)確
        offsetTop += item.offsetHeight + offset + 26;
    });
    // 設(shè)置offset及TMessage.vue中的top值
    data.offset = offsetTop;
 
    // 創(chuàng)建實(shí)例
    const app = createApp(TMessage, data);
    // 準(zhǔn)備dom容器
    const msgNode = document.createElement('div');
 
    // 添加到body上
    app.mount(msgNode);
    document.body.appendChild(msgNode);
 
    msgNode.style.top = offsetTop + 'px';
    msgNode.style.height = '20px';
 
    // 將當(dāng)前實(shí)例加入instances
    instances.push(msgNode);
}
 
// 消息類型：success，info,error,warning
['error', 'info', 'success', 'warning'].forEach(item => {
    Message[item] = function(data) {
        if (typeof data === 'string') {
            data = {
                message: data
            };
        }
 
        data.type = item;
        return Message(data);
    };
});
 
// 
//  * 獲取當(dāng)前這個(gè)instance的高度
//  * 把這個(gè)instance后面的所有實(shí)例的top減去這個(gè)高度，再減去偏移
//  * 
Message.close = function(msgNode) {
    // 獲取到DOM結(jié)構(gòu)中所有新創(chuàng)建的Node
    let curMessage = document.querySelectorAll("div.message");
 
    // 找到當(dāng)前div是在instances數(shù)組的下標(biāo)
    let index = instances.findIndex(item => item === msgNode);
    instances = instances.filter(item => item !== msgNode);
 
    // 獲取需要減去的高度(66=自身高度+offset高度);curMessage[0].offsetHeight才能得到真正解析后的高度
    let removeHeight = msgNode.offsetHeight + curMessage[0].offsetHeight;
 
    for (let i = index; i < curMessage.length; i++) {
        curMessage[i].style.top = parseInt(curMessage[i].style.top.split('px')[0]) - removeHeight + 'px';
    }
 
    // curMessage.length=1時(shí)是最后一次調(diào)用close方法，此時(shí)清空instances,則再次點(diǎn)擊offsetTop不會(huì)一直累加
    if (curMessage.length == 1) {
        instances = [];
    }
}
 
export default Message;
Message;

//TMessage.vue
<template>
  <!-- 動(dòng)畫效果 -->
  <transition name="message-fade">
    <!-- 使用數(shù)據(jù)綁定class -->
    <div
      v-if="!closed"
      :class="['message', 'message-' + type, center ? 'is-center' : '']"
      :style="{ top: offset + 'px' }"
    >
      <p class="message-content">{{ type }}：{{ message }}</p>
      <i class="icon icon-close" @click="closeTip"></i>
    </div>
  </transition>
</template>
<script>
export default {
  name: 'TMessage',
  props: {
    message: '默認(rèn)提示信息',
    type: 'info',
    center: true,
    offset: 20,
    duration: 2000,
    // 用于處理所有消息提示框消失后，其他提示框的位置
    onClose: null
  },
  data () {
    return {
      //   定時(shí)器
      timer: null,
      closed: false,
    }
  },
  mounted () {
    this.timer = setTimeout(() => {
      if (!this.closed) {
        this.close();
      }
    }, this.duration);
  },
  methods: {
    close () {
      this.closed = true;
      if (typeof this.onClose === 'function') {
        this.onClose();
      }
 
    }
  }
}
</script>

this.$message.error('用戶名和密碼不能為空');
 
 // this.$message({
        //   duration: 1000,
        //   message: '1111',
        //   type: 'warning',
        // })
        // this.$message({
        //   duration: 5000,
        //   message: '5555',
        //   type: 'error',
        // })
        // this.$message({
        //   duration: 3000,
        //   message: '3333',
        //   type: 'warning',
        // })
        // this.$message({
        //   duration: 4000,
        //   message: '4444',
        //   type: 'info',
        // })
        // this.$message({
        //   duration: 2000,
        //   message: '2222',
        //   type: 'success',
        // })

//入口文件：main.js
import { createApp } from 'vue'
import App from './App.vue'
// css文件直接引入
import '@/assets/css/css.css'
import router from '@/route/route'
import store from '@/store/store'
import Message from '@/components/TMessage/TMessage.js'
 
// Vue3將自定義組件加載到全局方法
const app = createApp(App);
app.config.globalProperties.$message = Message;
 
// 4.創(chuàng)建一個(gè)vue應(yīng)用，將App組件和定義的路由放入到vue應(yīng)用，并掛載到模板頁(yè)面id為app的元素上。
app.use(router).use(store).mount('#app')

this.$message.error("這是測(cè)試錯(cuò)誤");