AButton 按钮
本文介绍了 AButton 按钮组件以及相关 API。
此外,要查看该组件的视觉效果及示例代码,请参考本文 Demo。
Kylin
<dependency component="{ AButton }" src="@alipay/antui-vue" ></dependency>
ESModule
import { AButton } from '@alipay/antui-vue';
API 说明
props
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
type | 按钮类型,可选值为 | String | blue |
size | 按钮大小,可选值为 | String | default |
disabled | 设置禁用,当 type=page-result 时不支持。 | boolean | false |
loading | 设置按钮 icon 为 loading,仅适用于 size=default 时,当 type=page-result 时不支持。 | boolean | false |
success | 设置按钮 icon 为 success,仅适用于 size=default 时,当 type=age-result 时不支持)。 | boolean | false |
nativeType | DOM上的 type 属性。 | String | button |
href | 如果不为空,使用 | String | - |
inactiveLoading | 设为 true 时,当 | boolean | false |
slots
属性 | 说明 |
---|---|
- | 默认 slot,填充按钮文本。 |
icon | 用于填充 icon 的自定义节点,在设置了 |
events
属性 | 说明 | 函数 |
---|---|---|
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>