文档

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

按钮类型,可选值为 resultmultiweek''(空字符串)。

string

''

icon

Icon 类型,可选值为 successpayfailerrorwarninfowaitquestion,也可以传入一个 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>
  • 本页导读 (0)
文档反馈