All Products
Search
Document Center

Message

Last Updated: May 27, 2021

The Message topic describes different methods of using this component and the API descriptions:

  • Use this component in the Kylin project.
  • Use this component in other projects. Import it through ESModule.
  • API description provides API information for props, slots, and events.

Kylin

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

ESModule

 
  1. import { Message } from '@alipay/antui-vue';

API description

props

Property Description Type Default value
type Button type. Value options include result, multi, week, and ''(empty string). String ''
icon Icon type. Value options include success, pay, fail, error, warn, info, wait, and question. You can also input a class to define the icon. String success
main Main content of the pure text prompt. The DOM of the placeholder is not displayed when the main content is specified as false. String, Boolean -
sub Sub content of the pure text prompt. The DOM of the placeholder is not displayed when the main content is specified as false. String, Boolean -

slots

Name Description Scope
main Used in the scenario where the DOM needs to be populated into props.main. -
sub Used in the scenario where the DOM needs to be populated into props.sub. -
- Used to populate content under sub. -

events

Name Description Function

Demo

Success state

Sample image

Sample code

 
  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>

Success result page

Sample image

Sample code

 
  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>