AlertTips

17:06

Description

Highlights information that needs attention. type provides success / warning / info / error themes and drives the background, border, text and default icon colors; supports a title, description, leading icon and close button. The title is bolded automatically when a description is present.

Compatibility

Platform	Support
App	✅ Supported
H5	✅ Supported
WeChat Mini Program	✅ Supported

Examples

Basic Usage

Set the text via title; defaults to the warning theme and emits click when tapped.

View source

<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>

Theme

Configure success / warning / info / error via type; show-icon displays the matching icon.

View source

<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 with Description

With both title and description, the title is bolded automatically, suitable for multi-line messages.

View source

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

Closable

close-able shows the close button and close-text customizes its label; closing only emits the close event, while show controls visibility from outside.

View source

<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>

Custom Icon

The icon property overrides the default theme icon; icon-style adjusts the icon style.

View source

<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>

Custom Styles

color / bg-color / border-color override text, background and border colors; title-style / desc-style fine-tune each part.

View source

<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

Property	Description	Type	Default	Version
customStyle	Custom style for the root node (object form)	Object	-	-
customClass	Custom class for the root node	String	''	-
title	Text to display. Defaults to empty	String	''	-
type	Theme: success / warning / info / error	String	'warning'	-
description	Secondary text. Defaults to empty	String	''	-
closeAble	Whether the tip can be closed	Boolean	false	-
closeText	Custom text for the close button	String	''	-
showIcon	Whether to show the leading icon	Boolean	false	-
color	Text color; falls back to the global tipsColor	String	''	-
bgColor	Background color; falls back to a light tint by type	String	''	-
borderColor	Border color; falls back to a disabled tint by type	String	''	-
show	Whether to show the tip	Boolean	true	-
icon	Icon name on the left; falls back to the default icon by type	String	''	-
iconStyle	Icon style (object form)	Object	-	-
titleStyle	Title style (object form)	Object	-	-
descStyle	Description style (object form)	Object	-	-

Events

Event	Description	Params	Version
click	Emitted when the title/description area is tapped	-	-
close	Emitted when the close button is tapped	-	-

Slots

ux-alert-tips has no slots.

Notes

1. close-able only emits close; the component never hides itself. Set show to false in the handler (the demo uses this controlled pattern).
2. A non-empty closeText replaces the close icon — both are never rendered together.
3. click fires only from the title/description area; tapping the close button or icon does not bubble into click.
4. The title is bolded (font-weight: 500) only when description is present; a lone title keeps the normal weight.
5. icon overrides the theme default icon. An explicit color in iconStyle wins over the color derived from type.
6. color changes text and default icon color only, not the background or border; use bgColor / borderColor for those.