文档

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

按钮类型,可选值为 bluewhitewarnbottompage-result(仅用于 PageResult 下)。

String

blue

size

按钮大小,可选值为 defaulttiny,当设置为 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=age-result 时不支持)。

boolean

false

nativeType

DOM上的 type 属性。

String

button

href

如果不为空,使用 a 标签渲染,否则默认使用 button 渲染。

String

-

inactiveLoading

设为 true 时,当 loading 为 true 时不会触发 click 事件,且不会改变 button 的样式;设为 false 时,保持 loading 原有的行为。

boolean

false

slots

属性

说明

-

默认 slot,填充按钮文本。

icon

用于填充 icon 的自定义节点,在设置了 loading/success 时会填充默认值。

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>