PPT/src/utils/components/messageInstruction.vue

<template>
  <div class="messageInstruction">
    <div class="messageItem" :class="item.type" v-for="item in messageList" :key="item.id">
      <div class="icon">
        <svg v-if="['success'].includes(item.type)" viewBox="0 0 1024 1024"><path d="M512 85.333333c235.648 0 426.666667 191.018667 426.666667 426.666667s-191.018667 426.666667-426.666667 426.666667S85.333333 747.648 85.333333 512 276.352 85.333333 512 85.333333z m-74.965333 550.4L346.453333 545.152a42.666667 42.666667 0 1 0-60.330666 60.330667l120.704 120.704a42.666667 42.666667 0 0 0 60.330666 0l301.653334-301.696a42.666667 42.666667 0 1 0-60.288-60.330667l-271.530667 271.488z" fill="#67C239"></path></svg>
        <svg v-if="['pptMessage'].includes(item.type)" viewBox="0 0 1024 1024" ><path d="M512 85.333c-234.667 0-426.667 192-426.667 426.667s192 426.667 426.667 426.667 426.667-192 426.667-426.667S746.667 85.333 512 85.333z m21.333 640h-42.666c-12.8 0-21.334-8.533-21.334-21.333v-42.667c0-12.8 8.534-21.333 21.334-21.333h42.666c12.8 0 21.334 8.533 21.334 21.333V704c0 12.8-8.534 21.333-21.334 21.333zM512 554.667c-25.6 0-42.667-17.067-42.667-42.667V341.333c0-25.6 17.067-42.666 42.667-42.666s42.667 17.066 42.667 42.666V512c0 25.6-17.067 42.667-42.667 42.667z" fill="#FCCF00"></path></svg>
        <!-- <svg v-if="['pptMessage'].includes(item.type)" viewBox="0 0 1024 1024"><path d="M512 28.444444C244.906667 28.444444 28.444444 244.906667 28.444444 512s216.462222 483.555556 483.555556 483.555556 483.555556-216.462222 483.555556-483.555556S779.093333 28.444444 512 28.444444z m30.225067 755.5584A30.190933 30.190933 0 0 1 512 814.222222a30.190933 30.190933 0 0 1-30.225067-30.225066A30.190933 30.190933 0 0 1 512 753.777778a30.190933 30.190933 0 0 1 30.225067 30.225066z m0-120.888888A30.190933 30.190933 0 0 1 512 693.327644a30.190933 30.190933 0 0 1-30.225067-30.225066V240.008533A30.190933 30.190933 0 0 1 512 209.772089a30.190933 30.190933 0 0 1 30.225067 30.225067v423.105422z" fill="#FCCF00"></path></svg> -->
      </div>
      <div class="message" v-html="item.message"></div>
      <div class="close" @click="close(item.id)" v-if="item.showClose">
        <svg viewBox="0 0 1025 1024"><path d="M997.553471 154.252491 639.804427 512.001535 997.553471 869.751602l0 0c16.34988 16.374439 26.450623 38.948897 26.450623 63.898376 0 49.899981-40.450041 90.350022-90.351045 90.350022-24.949479 0-47.549519-10.100743-63.897353-26.475181l0 0L512.003581 639.775775 154.255561 997.525842l0 0c-16.34988 16.374439-38.948897 26.475181-63.899399 26.475181-49.901004 0-90.350022-40.450041-90.350022-90.350022 0-24.950502 10.099719-47.523938 26.449599-63.898376l0 0 357.750067-357.750067L26.454716 154.252491l0 0c-16.34988-16.350903-26.449599-38.949921-26.449599-63.900423 0-49.899981 40.449018-90.348999 90.350022-90.348999 24.950502 0 47.550543 10.099719 63.899399 26.474158l0 0 357.748021 357.749044L869.754672 26.477228l0 0c16.348857-16.374439 38.948897-26.474158 63.897353-26.474158 49.901004 0 90.351045 40.449018 90.351045 90.348999C1024.00307 115.301547 1013.902327 137.901588 997.553471 154.252491L997.553471 154.252491z" fill="#1A1A1A"></path></svg>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'

const messageList = ref([])

const success = (data) => {
  if (typeof data === 'string') {
    let _id = Date.now()
    messageList.value.push({
      id: _id,
      type: 'success',
      message: data,
      showClose: data.showClose || false
    })
    setTimeout(() => {
      messageList.value = messageList.value.filter(item => item.id !== _id)
    }, 3000)
  } else if (typeof data === 'object' && data.message && data.duration) {
    let _id = Date.now()
    messageList.value.push({
      id: _id,
      type: 'success',
      message: data.message,
      showClose: data.showClose || false
    })
    setTimeout(() => {
      messageList.value = messageList.value.filter(item => item.id !== _id)
    }, data.duration)
  }
}

const pptMessage = (data) => {
  if (typeof data === 'string') {
    let _id = Date.now()
    messageList.value.push({
      id: _id,
      type: 'pptMessage',
      message: data,
      showClose: data.showClose || true
    })
    setTimeout(() => {
      messageList.value = messageList.value.filter(item => item.id !== _id)
    }, 3000)
  } else if (typeof data === 'object' && data.message && data.duration) {
    let _id = Date.now()
    messageList.value.push({
      id: _id,
      type: 'pptMessage',
      message: data.message,
      showClose: data.showClose || true
    })
    setTimeout(() => {
      messageList.value = messageList.value.filter(item => item.id !== _id)
    }, data.duration)
  }
}

const close = (id) => {
  messageList.value = messageList.value.filter(item => item.id !== id)
}
defineExpose({
  success,
  pptMessage,
  close
})
</script>

<style lang="scss" scoped>
.messageInstruction {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translate(-50%, 0%);
  width: auto;
  height: auto;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.messageItem{
  padding: 15px 20px;
  border-radius: .2rem;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
  box-shadow: 0 0 .2rem rgba(0, 0, 0, 0.1);
  transition: .3s;
}

.messageItem>.icon{
  width: 1.3rem;
  height: 1.3rem;
  margin-right: .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  //margin-top: -.1rem;
  line-height: 1rem;
}

.messageItem>.icon>svg{
  width: 100%;
  height: 100%;
}

.messageItem>.close{
  width: .6rem;
  height: .6rem;
  margin-left: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: .3rem;
}

.messageItem>.close>svg{
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.messageItem>.message{
  flex: 1;
  max-width: 50vh;
}

.messageItem {
  animation: slideDownFadeIn 0.3s ease-out;
}

@keyframes slideDownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

</style>