更新时间:2020-11-25 14:41
AButton 按钮文档介绍了使用该组件的不同方式以及 API 文档:
此外,要查看该组件的视觉效果及示例代码,请参考本文 Demo。
<dependency component="{ AButton }" src="@alipay/antui-vue" ></dependency>
import { AButton } from '@alipay/antui-vue';
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
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 |
name | 说明 | scope |
---|---|---|
- | 默认slot,填充按钮文本 | - |
icon | 用于填充icon的自定义节点,在设置了 loading /success 时会填充默认值 |
- |
name | 说明 | 函数 |
---|---|---|
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>
在文档使用中是否遇到以下问题
更多建议
匿名提交