什么是AButton按钮组件_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

本文介绍了 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-result`（仅用于 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=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

按钮

截图

代码

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