如何使用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	按钮类型，可选值为 `resultmulti`、`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

属性	说明	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>