vue组件记录-提示信息

效果如下：

.vue

<template>
  <!-- begin: 提示信息组件 -->
  <div>
    <div class="v-modal" v-if="isShow"></div>
    <div class="pj-message" v-if="isShow">
      <span v-for="(item, index) in typeArr" :key="index">
        <div v-if="type === item.type" class="box" :class="type">
          <i class="icon" :class="item.class"></i>
          <div class="text">{{ text }}</div>
        </div>
      </span>
    </div>
  </div>
  <!-- end: 提示信息组件 -->
</template>
<script>

export default {
  name: 'Message'
};
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/variables.scss";
.v-modal {
  z-index: 4000;
}
.pj-message {
  width: 384px;
  .box {
    position: relative;
    .icon {
      position: absolute;
      top: -4px;
    }
    .text {
      margin-left: 30px + 18px;
    }
  }
  position: fixed;
  z-index: 4001;
  left: 50%;
  top: 50%;
  background: #fff;
  padding: 60px 56px 60px 56px;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  color: #12171F;
  font-size: 16px;
  i {
    font-size: 30px;
    margin-right: 22px;
  }
  .info i { color: $blue; }
  .success i { color: #8CC769; }
  .wraning i { color: $yellow; }
  .danger i { color: $red; }
}
</style>

.js

import vue from 'vue';
import globalThis from '@/utils/common-config/parameter-config';
import Message from './components/Message';

const { $document } = globalThis;

// 组件构造器，构造出一个 vue组件实例
const MessageConstructor = vue.extend(Message);
function showMessage({ text, type, duration = 2000 }) {
  const messageDom = new MessageConstructor({
    el: $document.createElement('div'),
    data() {
      return {
        isShow: true, // 是否显示
        text, // 文本内容
        type, // 类型
        typeArr: [
          {
            type: 'info',
            class: 'el-icon-info'
          },
          {
            type: 'success',
            class: 'el-icon-success'
          },
          {
            type: 'wraning',
            class: 'el-icon-warning'
          },
          {
            type: 'danger',
            class: 'el-icon-error'
          }
        ]
      };
    }
  });
  // 添加节点
  $document.body.appendChild(messageDom.$el);
  // 过渡时间
  setTimeout(() => { messageDom.isShow = false; }, duration);
}
export default showMessage;