AButton 按钮

AButton 按钮文档介绍了使用该组件的不同方式以及 API 文档：

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

此外，要查看该组件的视觉效果及示例代码，请参考本文 Demo。

Kylin

<dependency component="{ AButton }" src="@alipay/antui-vue" ></dependency>

ESModule

import { AButton } from '@alipay/antui-vue';

API 文档

props

属性	说明	类型	默认值
type	按钮类型，可选值为 blue , white , warn , bottom , page-reuslt (仅用于 PageResult 下)。	String	blue
size	按钮大小，可选值为 default , tiny , 当设置为 tiny 时，type 仅支持white , blue , ([type=page-result] 不支持)。	String	default
disabled	设置禁用, ([type=page-result] 不支持)。	boolean	false
loading	设置按钮icon为loading，仅适用于 size=default 时, ([type=page-result] 不支持)。	boolean	false
success	设置按钮icon为success，仅适用于 size=default 时, ([type=page-result] 不支持)。	boolean	false
nativeType	DOM上的 type 属性。	String	button
href	如果不为空，使用a标签渲染，否则默认使用 button 渲染.。	String	-
inactiveLoading	设为 true 时，当 loading 为 true 时不会触发click事件，且不会改变 button 的样式；设为 false 时，保持 loading 原有行为。	boolean	false

slots

name	说明	scope
-	默认slot,填充按钮文本	-
icon	用于填充icon的自定义节点，在设置了 loading/success 时会填充默认值	-

events

name	说明	函数
click	当点击按下时	Function(event: Event): void

Demo

• 按钮
• 辅助按钮
• 加载
• 警示

按钮

截图

代码

<template>
  <div style="padding: 10px;">
    <AButton >主按钮</AButton>
    <AButton type="white">次按钮</AButton>
    <AButton disabled>按钮不可点</AButton>
    <AButton href="#">a标签 主按钮</AButton>
    <AButton href="#" type="white">a标签 次按钮</AButton>
    <AButton href="#" disabled>a标签 按钮不可点</AButton>
  </div>
</template>
<style scoped>
.am-button {
  margin-bottom: 20px;
}
</style>

辅助按钮

截图

代码

<template>
  <div style="padding: 10px;">
    <AButton size="tiny" type="white">辅助按钮</AButton>
    <AButton size="tiny" type="white" disabled>辅助按钮</AButton>
    <AButton href="#" size="tiny" type="white">辅助按钮</AButton>
    <AButton href="#" size="tiny" type="white" disabled>辅助按钮</AButton>
    <AButton size="tiny">辅助按钮</AButton>
    <AButton size="tiny" disabled>辅助按钮</AButton>
    <AButton href="#" size="tiny">辅助按钮</AButton>
    <AButton href="#" size="tiny" disabled>辅助按钮</AButton>
  </div>
</template>
<style scoped>
.am-button {
  margin-bottom: 20px;
}
</style>

加载

截图

代码

<template>
  <div style="padding: 10px;">
    <AButton loading>加载中...</AButton>
    <AButton success>付款成功...</AButton>
    <AButton loading type="blue">加载中...</AButton>
    <AButton loading type="white">加载中...</AButton>
    <AButton loading type="warn">加载中...</AButton>
    <AButton loading type="bottom">加载中...</AButton>
    <AButton loading type="blue" size="tiny">加载中...</AButton>
    <AButton loading type="white" size="tiny">加载中...</AButton>
  </div>
</template>
<style scoped>
.am-button {
  margin-bottom: 20px;
}
</style>

警示

截图

代码

<template>
  <div style="padding: 10px 0;">
    <AButton type="warn">警示按钮</AButton>
    <AButton type="warn" disbaled>警示按钮</AButton>
  </div>
</template>
<style scoped>
.am-button {
  margin-bottom: 20px;
}
</style>