vue3——自己封装消息提示功能组件

---

前言

消息提示的弹出框相信大家在浏览网页的时候经常见到，今天跟着本文的脚步一起来自己封装一个消息提示的全局组件吧~

---

一、为什么封装？

• 为了统一项目中提示信息的风格统一
• 项目是由多人合作开发，封装一次，其他人也可以使用

二、如何封装？

1. 封装

和之前文章一样的操作，将公共组件放至src/components下，新建my-message.vue组件

代码如下（示例）：

<template>
  <Transition name="down">
    <div class="my-message" :style="style[type]" v-show='isShow'>
      <!-- 上面绑定的是样式 -->
      <!-- 不同提示图标会变 -->
      <i class="iconfont" :class="[style[type].icon]"></i>
      <span class="text">{
   {
   text}}</span>
    </div>
  </Transition>
</template>
<script>
import {
    onMounted, ref } from 'vue'

export default {
   
  name: 'MyMessage',
  props: {
   
    text: {
   
      type: String,
      default: ''
    },
    type: {
   
      type: String,
      // warn 警告  error 错误  success 成功
      default: 'warn'
    }
  }</