全部产品

Message 信息状态

更新时间:2020-08-07 20:28:58

Message 信息状态文档介绍了使用该组件的不同方式以及 API 文档:

  • Kylin 工程中使用该组件。
  • 在其他工程中使用,通过 ESModule 的方式导入组件。

API 文档 提供了 props、slots、events 的接口信息。

Kylin

  1. <dependency component="{ Message }" src="@alipay/antui-vue" ></dependency>

ESModule

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

name 说明 函数

Demo

成功状态

截图

代码

  1. <template>
  2. <div>
  3. <Message type="result" icon="success" main="成功" sub="成功副提示"></Message>
  4. <Message type="multi" icon="success" main="主提示" sub="副提示"></Message>
  5. <Message type="" icon="success" main="支付成功" :sub="false" ></Message>
  6. </div>
  7. </template>

成功结果页

截图

代码

  1. <template>
  2. <div>
  3. <Message type="result" icon="success" main="成功" >
  4. <template slot="sub">
  5. 内容详情,根据实际文案安排<br />如果换行不超过两行
  6. </template>
  7. </Message>
  8. <div class="am-button-wrap">
  9. <AButton type="blue">主操作</AButton>
  10. <AButton type="white">辅助操作</AButton>
  11. </div>
  12. </div>
  13. </template>