在vue3中实现类似于element的ElMessage轻提示组件

首先我们需要创建一个组件作为容器，将这个容器挂载在body上

<template>
    <Teleport to="body">
      <slot />
    </Teleport>
</template>

<script setup lang="ts">
</script>

Teleport是vue的一个内置组件它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。具体文档参考cn.vuejs.org/guide/built… 。

第二步我们来创建我们的轻提示组件

<template>
    <div class="message">{{ message }}</div>
</template>
  
<script setup lang="ts">
import { computed, defineProps } from 'vue'
const props = defineProps<{
    message: string
}>()

const message = computed(() => props.message)
</script>
<style>
.message{
    color: red;
    z-index: 100001;
    padding: 0.5rem 2rem;
    background: rgba(0, 0, 0, .5);
    border-radius: 10px;
    position: fixed;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
}
</style>

第三步写一个函数用来生成我们的组件，当然当轻提示延时结束之后我们需要消除组件

import { createApp, h } from 'vue';
import Portal from '../components/Protil.vue';
import Message from '../components/Message.vue';

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d019e82e86db4b389e2a83989da03693~tplv-k3u1fbpfcp-watermark.image?)
const message = (text:string) => {
  const container = document.createElement('div');
  document.body.appendChild(container);

  const app = createApp({
    render() {
      return h(Portal, [h(Message, { message: text })]);
    },
  });

  app.mount(container);

  setTimeout(() => {
    app.unmount();
    console.log(text)
    document.body.removeChild(container);
  }, 3000);
};

export default message;

最后我们把函数写成hook然后抛出去

让我们在组件中使用一下吧

import { onMounted } from 'vue';
import message from './hook/message';
onMounted(async () => {
  message('wzc')
})

看一下效果

需要的朋友们快试试吧！