Vue3自定义实现message如何实现elementplus中的message的动画效果

Vue3 自定义实现消息提示（message）类似 Element Plus 的动画效果，可以借助 CSS 动画、JavaScript 和 Vue 的响应式特性来完成。首先，你需要创建一个 Vue 组件，比如 `CustomMessage.vue`，并包含以下关键部分：

1. **CSS**:
- 创建一个包含动画的关键帧（@keyframes），例如淡入淡出效果。

   @keyframes message-fade {
     0% { opacity: 0; }
     100% { opacity: 1; }
   }
   
   .custom-message {
     display: flex;
     position: fixed;
     animation: message-fade 0.5s ease-in-out;
   }

然后给组件添加这个样式。

2. **HTML**:

   <template>
     <div class="custom-message">
       <slot></slot> <!-- 显示消息内容 -->
     </div>
   </template>

这里使用 `<slot>` 来接收传递进来的动态内容。

3. **JavaScript (Vue 部分)**:

   <script setup>
   import { ref } from 'vue';

   const message = ref('');
   const showMessage = (msg) => {
     message.value = msg;
     // 可能需要手动触发更新，因为 Vue 中不是所有值改变都会自动更新 DOM
     requestAnimationFrame(() => {
       message.value = msg;
     });
   };

   // 使用时...
   // showMessage('Hello, world!');
   </script>

4. **使用示例**:
在其他组件中通过插槽传递消息，并显示动画：

   <CustomMessage v-if="showMessageFlag">
     {{ message }}
   </CustomMessage>

当 `showMessageFlag` 为真时，会显示消息动画。