ui-alert-text 文本提示组件

版本：v2.3.11

文本提示组件，用于显示提示信息、警告信息等，支持多种主题和自定义样式

基本使用

<template>
  <view class="alert-text-demo">
    <ui-alert-text title="提示标题">
      这是一条提示信息
    </ui-alert-text>
  </view>
</template>

<script setup>
</script>

<style scoped>
.alert-text-demo {
  padding: 20px;
}
</style>

Props

参数	类型	默认值	说明
title	String	''	提示标题
type	String	'warning'	主题类型，可选值：primary、success、warning、danger、info
closable	Boolean	false	是否可关闭
icon	String	''	图标类名
line	Boolean	false	是否为镂空线框样式
light	Boolean	false	是否为浅色样式
center	Boolean	false	文字是否居中
fontSize	String\|Number	28	字体大小
backgroundColor	String	'#333'	自定义背景颜色
textColor	String	'#fff'	自定义文字颜色
opacity	String\|Number	1	背景透明度
visible	Boolean	true	控制显示/隐藏

Events

事件名	说明	回调参数
click	点击提示框时触发	-
close	点击关闭按钮时触发	-

Slots

名称	说明
default	提示内容

示例

不同主题的提示

<template>
  <view class="alert-text-demo">
    <ui-alert-text type="primary" title="主要提示">
      这是一条主要提示信息
    </ui-alert-text>
    
    <ui-alert-text type="success" title="成功提示">
      操作成功！
    </ui-alert-text>
    
    <ui-alert-text type="warning" title="警告提示">
      请注意！
    </ui-alert-text>
    
    <ui-alert-text type="danger" title="危险提示">
      危险操作！
    </ui-alert-text>
    
    <ui-alert-text type="info" title="信息提示">
      这是一条信息
    </ui-alert-text>
  </view>
</template>

可关闭的提示

<template>
  <view class="alert-text-demo">
    <ui-alert-text 
      v-if="showAlert" 
      type="warning" 
      title="提示" 
      :closable="true" 
      @close="showAlert = false">
      点击右上角的 × 可以关闭此提示
    </ui-alert-text>
  </view>
</template>

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

const showAlert = ref(true)
</script>

自定义颜色

<template>
  <view class="alert-text-demo">
    <ui-alert-text 
      backgroundColor="#67C23A" 
      textColor="#FFFFFF"
      :opacity="0.8">
      自定义背景色和文字颜色
    </ui-alert-text>
  </view>
</template>

平台兼容

平台	支持情况
H5	✅
微信小程序	✅
支付宝小程序	✅
百度小程序	✅
字节跳动小程序	✅
QQ小程序	✅
APP	✅

注意事项

1. backgroundColor 支持十六进制颜色和 rgba 格式
2. 当设置了自定义 backgroundColor 时，type 属性的背景色会被覆盖
3. opacity 只对 backgroundColor 生效，不影响 textColor
4. closable 为 true 时，右上角会显示关闭按钮

在线演示

扫码或点击链接在手机上查看完整演示

https://shadow-ui3-demo.nooko.cn/#/pages/base/alert/alert