Message 信息状态文档介绍了使用该组件的不同方式以及 API 文档:
Kylin
<dependency component="{ Message }" src="@alipay/antui-vue" ></dependency>
ESModule
import { Message } from '@alipay/antui-vue';
API 文档
props
属性 |
说明 |
类型 |
默认值 |
type |
按钮类型,可选值为result ,multi ,week ,'' (空字符串) |
string |
'' |
icon |
Icon类型,可选值为success , pay , fail , error , warn , info , wait , question ,也可以传入一个class 来自定义Icon |
string |
success |
main |
纯文本提示主内容,当指定为false 时,该占位的DOM不展示 |
string,boolean |
- |
sub |
纯文本提示副内容,当指定为false 时,该占位的DOM不展示 |
string,boolean |
- |
slots
name |
说明 |
scope |
main |
用于满足props.main 需要填充DOM的场景 |
- |
sub |
用于满足props.sub 需要填充DOM的场景 |
- |
- |
用于在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>
在文档使用中是否遇到以下问题
更多建议
匿名提交