AlertTips 警告提示

17:06

说明

用于展示需要关注的信息。type 提供 success / warning / info / error 四种主题，背景、边框、文字与默认图标颜色随主题回退；支持标题、描述、左侧图标与关闭按钮，标题与描述同时存在时标题自动加粗。

兼容性

平台	支持情况
App	✅ 支持
H5	✅ 支持
微信小程序	✅ 支持

示例

基础用法

通过 title 设置提示文字，默认 warning 主题，点击提示内容触发 click 事件。

查看源码

<template>
    <ux-alert-tips title="这是一条警告提示" @click="onClick" />
    <ux-toast ref="toastRef" />
</template>

<script setup lang="uts">
const toastRef = ref<any>();

const onClick = () => {
    toastRef.value?.show?.({
        title: '点击了提示内容',
        type: 'success',
        duration: 2000
    });
};
</script>

主题 type

通过 type 配置 success / warning / info / error 主题，show-icon 显示对应的默认图标。

查看源码

<template>
    <view class="alert-tips-list">
        <ux-alert-tips custom-class="alert-tips-item" type="success" show-icon title="成功提示" />
        <ux-alert-tips custom-class="alert-tips-item" type="warning" show-icon title="警告提示" />
        <ux-alert-tips custom-class="alert-tips-item" type="info" show-icon title="信息提示" />
        <ux-alert-tips custom-class="alert-tips-item" type="error" show-icon title="错误提示" />
    </view>
</template>

<style scoped>
.alert-tips-list {
    display: flex;
    flex-direction: column;
}
.alert-tips-item {
    margin-bottom: 8px;
}
</style>

标题与描述

同时传入 title 与 description 时标题自动加粗，适合展示多行关注信息。

查看源码

<template>
    <ux-alert-tips
        type="warning"
        show-icon
        title="升级提示"
        description="新版本已发布，包含多项功能优化与问题修复，建议尽快升级。"
    />
</template>

可关闭

close-able 显示关闭按钮，close-text 自定义关闭文案；关闭仅触发 close 事件，由外部控制 show 完成隐藏与恢复。

查看源码

<template>
    <ux-alert-tips :show="closeShow" close-able close-text="知道了" title="文件已上传到临时目录，确认后将自动清理。" @close="onClose" />
    <view v-if="!closeShow">
        <ux-button type="primary" size="small" shape="round" text="重新显示" @click="onShowAgain" />
    </view>
</template>

<script setup lang="uts">
const closeShow = ref(true);

const onClose = () => {
    closeShow.value = false;
};

const onShowAgain = () => {
    closeShow.value = true;
};
</script>

自定义图标 icon

icon 覆盖默认主题图标，icon-style 调整图标样式。

查看源码

<template>
    <ux-alert-tips type="success" show-icon icon="checkmark-circle" :icon-style="iconStyle" title="自定义图标的提示" />
</template>

<script setup lang="uts">
const iconStyle: UTSJSONObject = { 'color': '#19be6b' };
</script>

自定义样式

color / bg-color / border-color 覆盖文字、背景与边框颜色，title-style / desc-style 微调局部样式。

查看源码

<template>
    <ux-alert-tips
        title="自定义样式的提示"
        description="背景、边框与文字颜色均被覆盖，标题与描述样式单独定制。"
        color="#7c3aed"
        bg-color="#f3e8ff"
        border-color="#c4b5fd"
        :title-style="titleStyle"
        :desc-style="descStyle"
    />
</template>

<script setup lang="uts">
const titleStyle: UTSJSONObject = { 'font-size': '15px' };
const descStyle: UTSJSONObject = { 'font-size': '12px' };
</script>

API

Props

属性	说明	类型	默认值	版本
customStyle	自定义根节点样式，对象形式	Object	-	-
customClass	自定义根节点样式类	String	''	-
title	显示文字，默认空	String	''	-
type	主题，可选 success / warning / info / error，默认 warning	String	'warning'	-
description	辅助性文字，默认空	String	''	-
closeAble	是否可关闭，默认 false	Boolean	false	-
closeText	关闭按钮自定义文本，默认空	String	''	-
showIcon	是否显示图标，默认 false	Boolean	false	-
color	文字颜色，不传取全局 tipsColor	String	''	-
bgColor	背景颜色，不传按 type 取浅色	String	''	-
borderColor	边框颜色，不传按 type 取禁用色	String	''	-
show	是否显示，默认 true	Boolean	true	-
icon	左边显示的图标名，不传按 type 取默认图标	String	''	-
iconStyle	图标的样式，对象形式	Object	-	-
titleStyle	标题的样式，对象形式	Object	-	-
descStyle	描述文字的样式，对象形式	Object	-	-

Events

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

Slots

ux-alert-tips 无插槽。

注意事项

1. close-able 只派发 close，组件不会自行隐藏；需要监听后把 show 置为 false（示例即受控写法）。
2. closeText 非空时用文字替换关闭图标，两者不会同时出现。
3. click 只在标题/描述内容区触发，点击关闭按钮或图标不会冒泡成 click。
4. 只有传入 description 时标题才加粗（font-weight: 500）；单独使用 title 时保持常规字重。
5. icon 覆盖主题默认图标；iconStyle 中显式设置 color 时优先于 type 推导的图标色。
6. color 只改文字与默认图标色，不改变背景和边框；背景、边框分别由 bgColor / borderColor 覆盖。