Alert 提示组件

Breezli2025-04-032025-04-03

Alert 警告提示组件分析

组件功能概述

Alert 组件用于显示不同类型（如成功、警告等）的提示信息，支持关闭、图标、居中对齐等功能，通过 v-model 或 v-show 控制显示状态。

核心代码解析

Script 部分

<script setup lang="ts">
import type { AlertProps, AlertEmits, AlertInstance } from './types'
import { ref, computed } from 'vue'
import { typeIconMap } from '@veyra/utils'
import VrIcon from '../Icon/Icon.vue'

defineOptions({
  name: 'VrAlert',
})

const props = withDefaults(defineProps<AlertProps>(), {
  effect: 'light',      // 默认视觉效果
  type: 'info',         // 默认类型
  closable: true,       // 默认显示关闭按钮
})

const emits = defineEmits<AlertEmits>()
const visible = ref(true) // 控制显示状态

const iconName = computed(() => 
  typeIconMap.get(props.type) ?? 'circle-info' // 根据类型获取图标
)

const withDescription = computed(() => 
  props.description || !!useSlots().default // 判断是否有描述内容
)

function close() {
  visible.value = false
  emits('close') // 触发关闭事件
}

function open() {
  visible.value = true
}

defineExpose<AlertInstance>({
  open,
  close,
})
</script>

关键点解释

Props 默认值
- effect：默认 light（浅色背景）
- type：默认 info（信息类型）
- closable：默认显示关闭按钮
图标逻辑
- 通过 typeIconMap 映射类型到图标（如 success → check-circle）
- 默认图标为 circle-info（当类型未匹配时）
内容判断
- withDescription：若存在 description 或默认插槽内容，则认为有描述，调整图标大小
状态控制
- visible：通过 v-show 控制组件显示
- close 方法触发 close 事件并隐藏组件
- open 方法暴露给外部调用

Template 部分

<template>
  <transition name="vr-alert-fade">
    <div
      v-show="visible"
      class="vr-alert"
      role="alert"
      :class="{
        [`vr-alert__${type}`]: type,
        [`vr-alert__${effect}`]: effect,
        'text-center': center,
      }">
      <!-- 图标 -->
      <vr-icon
        v-if="showIcon"
        class="vr-alert__icon"
        :class="{ 'big-icon': withDescription }"
        :icon="iconName" />

      <!-- 内容区域 -->
      <div class="vr-alert__content">
        <span
          class="vr-alert__title"
          :class="{ 'with-desc': withDescription }"
          :style="{ display: center && !showIcon ? 'flow' : 'inline' }">
          <slot name="title">{{ title }}</slot>
        </span>

        <!-- 描述内容 -->
        <p class="vr-alert__description">
          <slot>{{ description }}</slot>
        </p>

        <!-- 关闭按钮 -->
        <div v-if="closable" class="vr-alert__close" @click.stop="close">
          <vr-icon icon="xmark" />
        </div>
      </div>
    </div>
  </transition>
</template>

关键点解释

过渡动画
- 使用 vr-alert-fade 实现渐隐效果（需在样式中定义过渡类）
类名控制
- vr-alert__type：根据 type 添加类型样式（如 vr-alert__success）
- vr-alert__effect：根据 effect 添加视觉效果样式
- text-center：居中对齐内容
图标显示
- showIcon 控制是否显示图标
- big-icon 类在有描述时增大图标尺寸
标题与描述
- 标题支持自定义插槽，使用 slot="title"
- 描述内容使用默认插槽或 description 属性
- 当 center 为 true 且无图标时，标题采用 flex 布局（可能存在 flow 拼写错误）
关闭按钮
- 点击关闭时阻止事件冒泡（@click.stop）
- 图标使用 xmark（叉号）

核心机制总结

类型与图标映射
- 通过 typeIconMap 将 AlertType 映射到具体图标（如 success → check-circle）。
内容与布局
- 支持标题、描述、关闭按钮的组合显示。
- center 属性使内容居中，需配合无图标时的 flex 布局调整。
状态控制
- visible 控制显示，通过 v-show 和 transition 实现渐隐动画。
- 外部可通过 alertRef.close() 或 v-model 控制显示。
视觉效果
- effect 控制背景色和边框色（light 或 dark）。
- type 决定颜色主题（如成功、警告等）。

使用示例

<template>
  <vr-alert
    v-model:visible="alertVisible"
    type="success"
    closable
    center
    show-icon
    @close="handleClose">
    <template #title>操作成功</template>
    <p>您的操作已成功完成！</p>
  </vr-alert>
</template>

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

const alertVisible = ref(true)
const handleClose = () => {
  alertVisible.value = false
}
</script>

API 文档

属性	类型	默认值	说明
`type`	`AlertType`	`info`	提示类型（success/info/warning/danger）
`effect`	`string`	`light`	视觉效果（light/dark）
`closable`	`boolean`	`true`	是否显示关闭按钮
`center`	`boolean`	`false`	内容是否居中
`showIcon`	`boolean`	`true`	是否显示图标
`title`	`string`	-	标题文本
`description`	`string`	-	描述文本

插槽	说明
`title`	自定义标题内容
`default`	自定义描述内容

事件	参数	说明
`close`	无	关闭时触发

方法	说明
`open()`	显示提示
`close()`	隐藏提示