Message组件实现发财UI 示例详解

<template>
  <div>
    <button @click="popNormalMsg">打开一个普通提醒</button>
  </div>
</template>
<script lang="ts">
import {popMessage} from "../../lib/popMessage";
export default {
  name: "Message1.demo",
  components: {Button},
  setup() {
    const popNormalMsg = () => {
      popMessage({
        message: '这是一个全局显示的普通提醒',   //提醒内容
        msgType: 'normal',   //提醒类型normal success error warning
        closeDelay: '2000',  //显示的时长，以ms为单位
      })
    }
    return {popNormalMsg}
  }
}
</script>

const typeIndicator = `<use href="#${props.msgType}" rel="external nofollow"  rel="external nofollow" ></use>`

<template>
  <div ref="msgDiv" class="rich-message">
    <svg class="iconpark-icon" v-html="typeIndicator">
      //2️⃣typeIndicator的内容会原封不动的跑到这里
    </svg>
    //3️⃣最后和svg标签一起变成type对应的图标
    <div class="rich-message-msgText">{{ message }}</div>
  </div>
</template>
<script lang="ts">
export default {
  name: "Message",
  props: {
    message: {
      type: String,
      required: true,
    },
    msgType: {
      type: String,
      default: 'normal',
    },
  },
  setup(props) {
    const typeIndicator = `<use href="#${props.msgType}" rel="external nofollow"  rel="external nofollow" ></use>`
    return {typeIndicator}
    //1️⃣接受到传来的type，然后typeIndicator会自动变为相应的图标use标签
  }
}
</script>

.rich-message {
  ...
  transform: translateY(-100px);
  transition: all 250ms;
  &.message-active {
    transform: translateY(0px);
    opacity: 1;
  }
}

element.insertAdjacentElement(position, element);

let msgContainer = document.getElementById('msgDiv')
if (msgContainer === null) {
  msgContainer = document.createElement('div')
  msgContainer.id = 'msgDiv'
  document.body.appendChild(msgContainer)
}
const div = document.createElement('div'); //这个div就是Message所在的div
msgContainer.insertAdjacentElement('beforeend', div)

#msgDiv {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

setTimeout(() => {
    msgDiv.classList.add('message-active')
}, 0)
setTimeout(() => {
    msgDiv.classList.remove('message-active')
}, closeDelay * 1);

setTimeout(() => {
    msgDiv.classList.remove('message-active')
    msgDiv.ontransitionend = () => {
      app.unmount();
      div.remove();
    }
}, closeDelay * 1);

function randomLetter(len) {
  let str = '';
  for (let i = 0; i < len; i++) {
    str += String.fromCharCode(~~(Math.random() * 26 + 65));
  }
  return str;
}
const msgId = randomLetter(~~(Math.random() * 10 + 30)) //生成了一个随机字符串
const app = createApp({
  render() {
    return h(Message, {
      message,
      msgType,
      id: msgId,
     });
  }
});
app.mount(div);
const msgDiv = document.getElementById(String(msgId))
setTimeout(() => {
    msgDiv.classList.add('message-active')
}, 0)
setTimeout(() => {
    msgDiv.classList.remove('message-active')
    msgDiv.ontransitionend = () => {
      app.unmount();
      div.remove();
    }
}, closeDelay * 1);

setTimeout(() => {
  msgDiv.classList.remove('message-active')
  msgDiv.ontransitionend = () => {
     app.unmount();
     div.remove();
     if (msgContainer.children.length === 0) {
       msgContainer.remove()
     }
  }
}, closeDelay * 1);