Alert 提示

提示用于在页面内展示信息、成功、警告或错误等提示内容。组件支持多种语义类型与深浅色调，可控制图标、边框、标题与关闭，并内置淡入淡出过渡。

小程序	APP	Web
✓	✓	✓

实例

以下按属性分别说明 mu-alert 的用法，可按需组合。

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

类型

设置提示的语义类型，可选 primary、success、warning、error、danger、info。

<mu-alert type="success" content="操作成功"></mu-alert>
<mu-alert type="warning" content="请注意该操作"></mu-alert>
<mu-alert type="error" content="操作失败，请重试"></mu-alert>
<mu-alert type="info" content="这是一条信息提示"></mu-alert>

色调

设置色调风格，可选 light 与 dark。

<mu-alert type="success" effect="dark" content="操作成功"></mu-alert>
<mu-alert type="warning" effect="dark" content="请注意该操作"></mu-alert>
<mu-alert type="error" effect="dark" content="操作失败，请重试"></mu-alert>
<mu-alert type="info" effect="dark" content="这是一条信息提示"></mu-alert>

图标

通过 show-icon 控制图标显隐，通过 icon 自定义图标名称。

<mu-alert type="info" :show-icon="false" content="不显示图标"></mu-alert>
<mu-alert type="info" icon="star1" content="自定义图标"></mu-alert>

边框

控制是否显示边框，默认为显示。

<mu-alert type="success" content="有边框"></mu-alert>
<mu-alert type="success" :bordered="false" content="无边框"></mu-alert>

标题

设置提示的标题，显示在主内容上方。

<mu-alert type="warning" title="提示" content="保存前请确认填写内容完整无误。"></mu-alert>

内容

主内容可通过默认插槽自定义，优先级高于 content。

<mu-alert type="info" title="使用说明">
  <view class="custom-body">
    <text class="custom-text">主内容通过默认插槽自定义。</text>
    <text class="custom-text">可放置多行文本或任意组件。</text>
  </view>
</mu-alert>

关闭

开启后右侧显示关闭图标，可关闭当前提示。

<mu-alert type="warning" closable content="点击右侧图标关闭本提示"></mu-alert>

动画时长

设置关闭时的淡出动画时长，单位为毫秒。

<mu-alert type="warning" title="事件演示" closable :duration="600"
  content="点击整条触发 click，点右侧关闭触发 close"
  @click="onAlertClick" @close="onAlertClose"></mu-alert>

属性

全部属性均可选，未传入时使用默认值；默认值列为 - 表示空字符串。

属性名称	说明	类型	默认值
type	提示语义类型，可选 primary、success、warning、error、danger、info	string	info
effect	色调风格，可选 light、dark	string	light
icon	自定义图标名称，为空时按 type 取默认图标	string	-
showIcon	是否显示图标	boolean	true
bordered	是否显示边框	boolean	true
closable	是否可关闭	boolean	false
duration	关闭时的淡出动画时长（ms）	number	300
title	标题	string	-
content	主内容文本	string	-
customClass	自定义根节点类名	string	-
customStyle	自定义根节点样式	any	-

事件

组件支持以下事件。

事件名	说明	回调参数
click	点击提示条时触发	event: UniEvent
close	点击关闭图标、淡出结束后触发	event: UniEvent

插槽

组件支持以下插槽。

名称	说明
default	自定义主内容，优先级高于 content