zx-alert 提示组件

简介

zx-alert 是一个用于页面中展示重要提示信息的组件。它不属于浮层元素，不会自动消失或关闭。

特性

• 🎨 多种类型 - 支持 success、info、warning、error 四种类型
• 🌓 双主题 - 提供 light 和 dark 两种主题样式
• 🔧 高度可定制 - 支持自定义关闭按钮、图标、样式等
• 📱 移动端适配 - 采用 rpx 单位，完美适配各种屏幕
• 🎯 插槽支持 - 支持 title、icon、default 插槽自定义内容
• ⚡ Vue 3 - 使用 Composition API 开发

基本用法

<template>
  <zx-alert title="这是一条提示信息" type="info" />
</template>

属性 (Props)

| 属性名 | 说明 | 类型 | 可选值 | 默认值 | |--------|------|------|--------|--------| | title | 标题 | String | — | — | | type | 类型 | String | success/info/warning/error | info | | description | 描述性文本 | String | — | — | | closable | 是否可以关闭 | Boolean | — | true | | center | 文字是否居中 | Boolean | — | false | | close-text | 自定义关闭按钮文本 | String | — | — | | show-icon | 是否显示类型图标 | Boolean | — | false | | effect | 主题样式 | String | light/dark | light | | custom-style | 自定义样式 | Object | — | {} |

事件 (Events)

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | close | 关闭 Alert 时触发的事件 | event |

插槽 (Slots)

| 插槽名 | 说明 | |--------|------| | default | Alert 内容描述 | | title | 标题的内容 | | icon | 自定义图标内容 |

方法 (Methods)

| 方法名 | 说明 | 参数 | |--------|------|------| | close | 手动关闭 Alert | — |

使用示例

基础用法

<template>
  <zx-alert title="成功提示的文案" type="success" />
  <zx-alert title="消息提示的文案" type="info" />
  <zx-alert title="警告提示的文案" type="warning" />
  <zx-alert title="错误提示的文案" type="error" />
</template>

主题样式

<template>
  <zx-alert title="深色主题" type="success" effect="dark" />
  <zx-alert title="浅色主题" type="success" effect="light" />
</template>

自定义关闭按钮

<template>
  <!-- 不可关闭 -->
  <zx-alert title="不可关闭的提示" type="info" :closable="false" />
  
  <!-- 自定义关闭文本 -->
  <zx-alert title="自定义关闭文本" type="warning" close-text="知道了" />
  
  <!-- 关闭回调 -->
  <zx-alert title="带回调的提示" type="error" @close="handleClose" />
</template>

<script setup>
const handleClose = () => {
  console.log('Alert 被关闭了');
};
</script>

带图标

<template>
  <zx-alert title="带图标的提示" type="success" show-icon />
  
  <!-- 自定义图标 -->
  <zx-alert title="自定义图标" type="info" show-icon>
    <template #icon>
      <zx-icon name="heart-fill" size="28" color="#409eff" />
    </template>
  </zx-alert>
</template>

文字居中

<template>
  <zx-alert title="居中的提示文案" type="success" center show-icon />
</template>

带描述

<template>
  <zx-alert 
    title="带描述的提示" 
    type="warning"
    description="这是一条详细的描述信息，为用户提供更多相关内容。"
  />
</template>

自定义内容

<template>
  <zx-alert type="info">
    <template #title>
      <text style="color: #409eff; font-weight: bold;">自定义标题</text>
    </template>
    <view style="color: #606266;">
      这里是自定义的内容区域，可以包含更丰富的信息。
    </view>
  </zx-alert>
</template>

自定义样式

<template>
  <zx-alert 
    title="自定义样式" 
    type="info"
    :custom-style="{ 
      backgroundColor: '#e1f3d8', 
      borderLeft: '6rpx solid #67c23a' 
    }"
  />
</template>

注意事项

1. 组件使用了 zx-icon 组件来显示图标，请确保项目中已正确引入图标组件
2. 组件支持 UniApp 的多端编译，在不同平台下表现一致
3. 使用 rpx 单位确保在不同设备上的适配效果
4. 组件内部使用了 transition 组件来实现关闭动画效果

更新日志

v1.0.0

• 初始版本发布
• 支持基础的 Alert 功能
• 使用 Vue 3 Composition API 重构
• 完善的类型定义和文档