1.0.6 • Published 1 month ago

@tanzhenxing/zx-alert v1.0.6

Weekly downloads
-
License
ISC
Repository
-
Last release
1 month ago

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类型Stringsuccess/info/warning/errorinfo
description描述性文本String
closable是否可以关闭Booleantrue
center文字是否居中Booleanfalse
close-text自定义关闭按钮文本String
show-icon是否显示类型图标Booleanfalse
effect主题样式Stringlight/darklight
custom-style自定义样式Object{}

事件 (Events)

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

插槽 (Slots)

插槽名说明
defaultAlert 内容描述
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 重构
  • 完善的类型定义和文档
1.0.6

1 month ago

1.0.5

2 months ago

1.0.4

2 months ago

1.0.3

5 months ago

1.0.1

11 months ago

1.0.0

11 months ago