Message 信息状态
本文介绍了使用 Message 信息状态组件的不同方式以及相关 API。
Kylin
<dependency component="{ Message }" src="@alipay/antui-vue" ></dependency>
ESModule
import { Message } from '@alipay/antui-vue';
API 说明
props
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
type | 按钮类型,可选值为 | string | '' |
icon | Icon 类型,可选值为 | string | success |
main | 纯文本提示主内容,当指定为 | string,boolean | - |
sub | 纯文本提示副内容,当指定为 | string,boolean | - |
slots
属性 | 说明 | scope |
---|---|---|
main | 用于满足 | - |
sub | 用于满足 | - |
- | 用于在 sub 下面填充内容。 | - |
events:无。
Demo
成功状态
截图

代码
<template>
<div>
<Message type="result" icon="success" main="成功" sub="成功副提示"></Message>
<Message type="multi" icon="success" main="主提示" sub="副提示"></Message>
<Message type="" icon="success" main="支付成功" :sub="false" ></Message>
</div>
</template>
成功结果页
截图

代码
<template>
<div>
<Message type="result" icon="success" main="成功" >
<template slot="sub">
内容详情,根据实际文案安排<br />如果换行不超过两行
</template>
</Message>
<div class="am-button-wrap">
<AButton type="blue">主操作</AButton>
<AButton type="white">辅助操作</AButton>
</div>
</div>
</template>