AButton 按钮_基本组件_基于 H5 框架 - UI 组件库_前端框架与 UI 组件

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

1.按钮

截图

代码

<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>

2.辅助按钮

截图

代码

<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>

3.加载

截图

代码

<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>

4.警示

截图

代码

<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>