vue2/vue3-封装简单而强大的全局弹框提示组件

利用vue3实现封装简单而强大的全局弹框提示组件，这个组件在用户体验和功能上却非常强大。它使用了Vue.js的响应式系统和动画效果，使得弹框在显示和隐藏时都能给用户带来良好的视觉体验

1、先看看实现效果：

2、上代码

Message.vue

// Message.vue
<template>
  <div class="message" v-if="visible">
    <img :src="imgSrc" />
    <span class="text">{{ text }}</span>
  </div>
</template>
<script setup lang="ts">
  import { onMounted, PropType, ref } from 'vue';
  const props = defineProps({
    text: {
      type: String,
      default: '',
    },
    type: {
      type: String as PropType<'warn' | 'error' | 'success'>,
      default: 'warn',
    },
  });
  const visible = ref(false);
  const imgSrc = ref('@/assets/img/warn.svg');
  onMounted(() => {
    switch (props.type) {
      case 'warn':
        imgSrc.value = require('@/assets/img/warn.svg');
        break;
      case 'error':
        imgSrc.value = require('@/assets/img/error.svg');
        break;
      case 'success':
        imgSrc.value = require('@/assets/img/success.svg');
        break;
      default:
        break;
    }
    console.log(imgSrc.value);
    visible.value = true;
  });
</script>
<style>
  .message {
    position: fixed;
    z-index: 88888;
    top: 0;
    color: black;
    left: 50%;
    height: 40px;
    line-height: 40px;
    top: 80px;
    transform: translate(-50%);
    padding: 12px;
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    animation: downed 100ms ease;
    border-radius: 4px;
    box-sizing: border-box;
  }
  @keyframes downed {
    0% {
      top: 60px;
    }
    100% {
      top: 80px;
    }
  }
  .text {
    margin-left: 5px;
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>

config.ts

有两种配置方式，根据个人爱好选择即可

第一种
// 实现使用函数调用message组件的逻辑
//   引入 创建虚拟节点 和渲染方法
import { createVNode, render } from 'vue';
// 引入信息提示组件
import message from './Message.vue';

// 准备dom容器
const div = document.createElement('div');
// 添加类名
div.setAttribute('class', 'message-container');
// 添加到body上
document.body.appendChild(div);

// 定时器标识
let timer = null;

export default ({ type, text }) => {
  const divs: any = document.getElementsByClassName('message');
  if (divs.length > 0) {
    clearTimeout(timer);
    render(null, div);
  }
  // 创建虚拟节点   第一个参数为要创建的虚拟节点  第二个参数为props的参数
  const vNode = createVNode(message, { type, text });
  // 把虚拟节点渲染DOM容器中
  render(vNode, div);
  // 开启定时器，移出DOM容器内容
  clearTimeout(timer);
  timer = setTimeout(() => {
    render(null, div);
  }, 3000);
};


第二种
// 实现使用函数调用message组件的逻辑
//   引入 创建虚拟节点 和渲染方法
import { createVNode, render } from 'vue';
// 引入信息提示组件
import message from './Message.vue';

// 准备dom容器
const div = document.createElement('div');
// 添加类名
div.setAttribute('class', 'message-container');
// 添加到body上
document.body.appendChild(div);

// 定时器标识
let timer = null;

function sendInfo(type, text) {
  const divs: any = document.getElementsByClassName('message');
  if (divs.length > 0) {
    clearTimeout(timer);
    render(null, div);
  }
  // 创建虚拟节点   第一个参数为要创建的虚拟节点  第二个参数为props的参数
  const vNode = createVNode(message, { type, text });
  // 把虚拟节点渲染DOM容器中
  render(vNode, div);
  // 开启定时器，移出DOM容器内容
  clearTimeout(timer);
  timer = setTimeout(() => {
    render(null, div);
  }, 3000);
}
export default {
  success(text) {
    sendInfo('success', text);
  },
  warn(text) {
    sendInfo('warn', text);
  },
  error(text) {
    sendInfo('error', text);
  },
};

使用

最后，我们可以通过调用message函数来显示弹框。例如：

第一种
message({ type: 'error', text: '测试弹框fun' });

第二种
message.error('测试弹框fun')

图片

error.svg

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="red" d="M2.93 17.07A10 10 0 1 1 17.07 2.93A10 10 0 0 1 2.93 17.07zM11.4 10l2.83-2.83l-1.41-1.41L10 8.59L7.17 5.76L5.76 7.17L8.59 10l-2.83 2.83l1.41 1.41L10 11.41l2.83 2.83l1.41-1.41L11.41 10z"/></svg>

warn.svg

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="#faad14" d="M2.93 17.07A10 10 0 1 1 17.07 2.93A10 10 0 0 1 2.93 17.07zM9 5v6h2V5H9zm0 8v2h2v-2H9z"/></svg>

success.svg

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><path fill="#52c41a" fill-rule="evenodd" d="M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4S4 12.954 4 24s8.954 20 20 20Zm10.742-26.33a1 1 0 1 0-1.483-1.34L21.28 29.567l-6.59-6.291a1 1 0 0 0-1.382 1.446l7.334 7l.743.71l.689-.762l12.667-14Z" clip-rule="evenodd"/></svg>