Vue开发者必备！手把手教你实现类似Element Plus的全局提示组件！

前言

在Web开发中，用户体验至关重要。有效的信息提示和错误消息对于确保用户更好地理解和操作至关重要。在这个背景下，全局弹框提示组件成为了一个非常有用的工具。Vue.js，作为当前最受欢迎的前端框架之一，为创建灵活、可复用的弹框组件提供了强大的支持。本文将介绍一个简单而强大的全局弹框提示组件，并探讨它是如何实现的。

组件示例

??
?

代码展示

Message.vue

首先，让我们看看这个全局弹框提示组件的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>

整个组件的作用是，根据传入的 text 和 type 显示一个带有图片和文本的弹框。其中 type 有三个可能的值：warn、error 和 success，分别表示警告、错误和成功。根据 type 的值，弹框的图片和文本也会有所不同。组件使用了 Vue.js 的响应式系统，使 visible、text 和 imgSrc 成为响应式引用，从而方便地与父组件共享数据。

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，该函数接受type和text两个参数。我们使用createVNode和render函数从创建一个Message组件的虚拟节点，并将其渲染到div元素中。我们还使用了一个定时器来在3秒后移除弹框。

第二种最大的改变是省去了传入的type，用户调用时直接传入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>

总结

虽然这个组件的实现原理很简单，但是它在用户体验和功能上却非常强大。它使用了Vue.js的响应式系统和动画效果，使得弹框在显示和隐藏时都能给用户带来良好的视觉体验。

完整附件：点此下载