Message 信息状态 - 移动开发平台 mPaaS

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>