Message 信息状态

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

• 在 Kylin 工程中使用该组件。
• 在其他工程中使用，通过 ESModule 的方式导入组件。
• API 文档 提供了 props、slots、events 的接口信息。

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

name	说明	函数

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>