Python私教张大鹏 Vue3整合AntDesignVue之按钮组件
何时使用
标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
在 Ant Design Vue 中我们提供了五种按钮。
- 主按钮：用于主行动点，一个操作区域只能有一个主按钮。
- 默认按钮：用于没有主次之分的一组行动点。
- 虚线按钮：常用于添加操作。
- 文本按钮：用于最次级的行动点。
- 链接按钮：一般用于链接，即导航至某位置。
以及四种状态属性与上面配合使用。
- 危险：删除/移动/修改权限等危险操作，一般需要二次确认。
- 幽灵：用于背景色比较复杂的地方，常用在首页/产品页等展示场景。
- 禁用：行动点不可用的时候，一般需要文案解释。
- 加载中：用于异步操作等待反馈的时候，也可以避免多次提交。
按钮类型
按钮有五种类型：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
核心代码：
<template><a-space wrap><a-button type="primary">Primary Button</a-button><a-button>Default Button</a-button><a-button type="dashed">Dashed Button</a-button><a-button type="text">Text Button</a-button><a-button type="link">Link Button</a-button></a-space>
</template>
vue3案例：
<template><div class="flex bg-indigo-50 p-8 gap-3"><div class="flex-1 h-12 bg-purple-200 flex items-center justify-center"><a-button type="primary">主按钮</a-button></div><div class="flex-1 h-12 bg-purple-200 flex items-center justify-center"><a-button>次按钮</a-button></div><div class="flex-1 h-12 bg-purple-200 flex items-center justify-center"><a-button type="dashed">虚线按钮</a-button></div><div class="flex-1 h-12 bg-purple-200 flex items-center justify-center"><a-button type="text">文本按钮</a-button></div><div class="flex-1 h-12 bg-purple-200 flex items-center justify-center"><a-button type="link">链接按钮</a-button></div></div>
</template>
<script setup lang="ts">
</script>
不可用状态
添加 disabled 属性即可让按钮处于不可用状态，同时按钮样式也会改变。
核心代码：
<template><a-space direction="vertical"><a-space><a-button type="primary">Primary</a-button><a-button type="primary" disabled>Primary(disabled)</a-button></a-space><a-space><a-button>Default</a-button><a-button disabled>Default(disabled)</a-button></a-space><a-space><a-button type="dashed">Dashed</a-button><a-button type="dashed" disabled>Dashed(disabled)</a-button></a-space><a-space><a-button type="text">Text</a-button><a-button type="text" disabled>Text(disabled)</a-button></a-space><a-space><a-button type="link">Link</a-button><a-button type="link" disabled>Link(disabled)</a-button></a-space><a-space><a-button danger>Danger Default</a-button><a-button danger disabled>Danger Default(disabled)</a-button></a-space><a-space><a-button danger type="text">Danger Text</a-button><a-button danger type="text" disabled>Danger Text(disabled)</a-button></a-space><a-space><a-button danger type="link">Danger Link</a-button><a-button danger type="link" disabled>Danger Link(disabled)</a-button></a-space><div :style="{ padding: '8px', background: 'rgb(190, 200, 200)' }"><a-space><a-button ghost>Ghost</a-button><a-button ghost disabled>Ghost(disabled)</a-button></a-space></div></a-space>
</template>
vue3示例：
<script setup>
</script><template><div class="flex p-8 bg-indigo-50 gap-3"><div class="flex-1 h-12 bg-purple-200 flex items-center justify-center"><a-button type="primary">主要按钮</a-button><a-button type="primary" disabled>主要按钮(禁用)</a-button></div><div class="flex-1 h-12 bg-purple-200 flex items-center justify-center"><a-button>次要按钮</a-button><a-button disabled>次要按钮(禁用)</a-button></div><div class="flex-1 h-12 bg-purple-200 flex items-center justify-center"><a-button type="dashed">虚线按钮</a-button><a-button type="dashed" disabled>虚线按钮(禁用)</a-button></div><div class="flex-1 h-12 bg-purple-200 flex items-center justify-center"><a-button type="text">虚线按钮</a-button><a-button type="text" disabled>虚线按钮(禁用)</a-button></div><div class="flex-1 h-12 bg-purple-200 flex items-center justify-center"><a-button type="link">链接按钮</a-button><a-button type="link" disabled>链接按钮(禁用)</a-button></div></div>
</template>
幽灵按钮
幽灵按钮将按钮的内容反色，背景变为透明，常用在有色背景上。
通过添加 ghost 关键字，能够让一个按钮变成幽灵按钮。
核心代码：
<template><div :style="{ background: 'rgb(190, 200, 200)', padding: '16px 16px' }"><a-space><a-button type="primary" ghost>Primary</a-button><a-button ghost>Default</a-button><a-button type="dashed" ghost>Dashed</a-button><a-button type="primary" danger ghost>Danger</a-button></a-space></div>
</template>
vue3示例：
<script setup>
</script><template><div class="grid grid-cols-3 gap-3 bg-indigo-50 p-8"><div class="h-32 bg-red-300 rounded flex space-x-3 justify-center items-center"><a-button type="primary">主要按钮</a-button><a-button type="primary" ghost>主要按钮(幽灵)</a-button><a-button type="primary" disabled>主要按钮(禁用)</a-button></div><div class="h-32 bg-red-300 rounded flex space-x-3 justify-center items-center"><a-button>次要按钮</a-button><a-button ghost>次要按钮(幽灵)</a-button><a-button disabled>次要按钮(禁用)</a-button></div><div class="h-32 bg-red-300 rounded flex space-x-3 justify-center items-center"><a-button type="dashed">虚线按钮</a-button><a-button type="dashed" ghost>虚线按钮(幽灵)</a-button><a-button type="dashed" disabled>虚线按钮(禁用)</a-button></div><div class="h-32 bg-red-300 rounded flex space-x-3 justify-center items-center"><a-button type="text">文本按钮</a-button><a-button type="text" ghost>文本按钮(幽灵)</a-button><a-button type="text" disabled>文本按钮(禁用)</a-button></div><div class="h-32 bg-red-300 rounded flex space-x-3 justify-center items-center"><a-button type="link">链接按钮</a-button><a-button type="link" ghost>链接按钮(幽灵)</a-button><a-button type="link" disabled>链接按钮(禁用)</a-button></div></div>
</template>
加载中状态
添加 loading 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。
核心代码：
<template><a-space direction="vertical"><a-space><a-button type="primary" loading>Loading</a-button><a-button type="primary" size="small" loading>Loading</a-button></a-space><a-space><a-button type="primary" :loading="loading" @mouseenter="loading = true">mouseenter me!</a-button><a-button type="primary" :loading="iconLoading" @click="enterIconLoading"><template #icon><PoweroffOutlined /></template>延迟1s</a-button></a-space><a-space><a-button type="primary" loading /><a-button type="primary" shape="circle" loading /><a-button danger shape="round" loading /></a-space></a-space>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { PoweroffOutlined } from '@ant-design/icons-vue';interface DelayLoading {delay: number;
}
const loading = ref<boolean>(false);
const iconLoading = ref<boolean | DelayLoading>(false);
const enterIconLoading = () => {iconLoading.value = { delay: 1000 };setTimeout(() => {iconLoading.value = false;}, 6000);
};
</script>
vue3示例：
<script setup>
</script><template><div class="flex p-8 bg-indigo-50 gap-3"><div class="h-32 bg-red-300 flex items-center justify-center flex-1"><a-button loading>按钮</a-button></div></div>
</template>
案例：鼠标移入按钮变加载状态
核心代码：
<a-button type="primary" :loading="loading" @mouseenter="loading = true">mouseenter me!
</a-button>
vue3示例：
<script setup>
import {ref} from "vue";const loading = ref(false)
</script><template><div class="flex p-8 bg-indigo-50 gap-3"><div class="h-32 bg-red-300 flex items-center justify-center flex-1"><a-button loading>按钮</a-button></div><div class="h-32 bg-red-300 flex items-center justify-center flex-1"><a-button :loading="loading" @mouseenter="loading=true" @mouseleave="loading=false">鼠标移入变加载</a-button></div></div>
</template>
案例：点击按钮变加载状态
核心代码：
<a-button type="primary" :loading="iconLoading" @click="enterIconLoading"><template #icon><PoweroffOutlined /></template>延迟1s
</a-button>
vue3示例：
<script setup>
import {PoweroffOutlined} from "@ant-design/icons-vue";
import {ref} from "vue";const iconLoading = ref(false)
const onClickIconButton = () => {iconLoading.value = true
}
</script><template><div class="h-32 bg-indigo-50 w-screen flex items-center justify-center space-x-3"><a-button type="primary"class="flex items-center":loading="iconLoading"@click="onClickIconButton"><template #icon><PoweroffOutlined/></template>按钮</a-button><a-button @click="iconLoading=false">取消加载状态</a-button></div>
</template>
按钮尺寸
按钮有大、中、小三种尺寸。
通过设置 size 为 large small 分别把按钮设为大、小尺寸。若不设置 size，则尺寸为中。
核心代码：
<template><a-space direction="vertical"><a-radio-group v-model:value="size"><a-radio-button value="large">Large</a-radio-button><a-radio-button value="default">Default</a-radio-button><a-radio-button value="small">Small</a-radio-button></a-radio-group><a-space><a-button type="primary" :size="size">Primary</a-button><a-button :size="size">Normal</a-button><a-button type="dashed" :size="size">Dashed</a-button><a-button danger :size="size">Danger</a-button><a-button type="link" :size="size">Link</a-button></a-space><a-space><a-button type="primary" :size="size"><template #icon><DownloadOutlined /></template></a-button><a-button type="primary" shape="circle" :size="size"><template #icon><DownloadOutlined /></template></a-button><a-button type="primary" shape="round" :size="size"><template #icon><DownloadOutlined /></template>Download</a-button><a-button type="primary" shape="round" :size="size"><template #icon><DownloadOutlined /></template></a-button><a-button type="primary" :size="size"><template #icon><DownloadOutlined /></template>Download</a-button></a-space></a-space>
</template>
<script lang="ts" setup>
import { DownloadOutlined } from '@ant-design/icons-vue';
import type { SizeType } from 'ant-design-vue/es/config-provider';
import { ref } from 'vue';
const size = ref<SizeType>('large');
</script>
vue3示例：
<script setup>
</script><template><div class="flex justify-center items-center space-x-3 p-8 bg-indigo-50"><a-button size="small">按钮</a-button><a-button size="middle">按钮</a-button><a-button size="large">按钮</a-button></div>
</template>
案例：展示一行按钮
核心代码：
<a-radio-group v-model:value="size"><a-radio-button value="large">Large</a-radio-button><a-radio-button value="default">Default</a-radio-button><a-radio-button value="small">Small</a-radio-button>
</a-radio-group>
vue3示例：
<script setup>
import {ref} from "vue";const size = ref("middle")
</script><template><a-radio-group v-model:value="size"><a-radio-button value="small">小</a-radio-button><a-radio-button value="middle">中</a-radio-button><a-radio-button value="large">大</a-radio-button></a-radio-group><hr><p>{{ size}}</p>
</template>
案例：展示多行多列按钮
核心代码：
<a-space direction="vertical"><a-radio-group v-model:value="size"><a-radio-button value="large">Large</a-radio-button><a-radio-button value="default">Default</a-radio-button><a-radio-button value="small">Small</a-radio-button></a-radio-group><a-space><a-button type="primary" :size="size">Primary</a-button><a-button :size="size">Normal</a-button><a-button type="dashed" :size="size">Dashed</a-button><a-button danger :size="size">Danger</a-button><a-button type="link" :size="size">Link</a-button></a-space>
</a-space>
vue3示例：
<script setup>
import {ref} from "vue";const size = ref("middle")
</script>
<template><a-space direction="vertical"><a-radio-group v-model:value="size"><a-radio-button value="small">小</a-radio-button><a-radio-button value="middle">中</a-radio-button><a-radio-button value="large">大</a-radio-button></a-radio-group><a-space><a-button :size="size">次要按钮</a-button><a-button type="primary" :size="size">主要按钮</a-button><a-button type="dashed" :size="size">虚线按钮</a-button><a-button type="text" :size="size">文本按钮</a-button><a-button type="link" :size="size">链接按钮</a-button></a-space></a-space>
</template>
危险按钮
在 2.2.0 之后，危险成为一种按钮属性而不是按钮类型。
核心代码：
<template><a-space warp><a-button type="primary" danger>Primary</a-button><a-button danger>Default</a-button><a-button type="dashed" danger>Dashed</a-button><a-button type="text" danger>Text</a-button><a-button type="link" danger>Link</a-button></a-space>
</template>
vue3示例：
<script setup>
</script>
<template><a-space><a-button danger type="primary">主要按钮</a-button><a-button danger type="default">次要按钮</a-button><a-button danger type="dashed">虚线按钮</a-button><a-button danger type="text">文本按钮</a-button><a-button danger type="link">链接按钮</a-button></a-space>
</template>
图标按钮
当需要在 Button 内嵌入 Icon 时，可以设置 icon 属性，或者直接在 Button 内使用 Icon 组件。
如果想控制 Icon 具体的位置，只能直接使用 Icon 组件，而非 icon 属性。
核心代码：
<template><a-space direction="vertical"><a-space warp><a-tooltip title="search"><a-button type="primary" shape="circle" :icon="h(SearchOutlined)" /></a-tooltip><a-button type="primary" shape="circle">A</a-button><a-button type="primary" :icon="h(SearchOutlined)">Search</a-button><a-tooltip title="search"><a-button shape="circle" :icon="h(SearchOutlined)" /></a-tooltip><a-button :icon="h(SearchOutlined)">Search</a-button></a-space><a-space warp><a-tooltip title="search"><a-button shape="circle" :icon="h(SearchOutlined)" /></a-tooltip><a-button :icon="h(SearchOutlined)">Search</a-button><a-tooltip title="search"><a-button type="dashed" shape="circle" :icon="h(SearchOutlined)" /></a-tooltip><a-button type="dashed" :icon="h(SearchOutlined)">Search</a-button><a-button :icon="h(SearchOutlined)" href="https://www.google.com" /></a-space></a-space>
</template>
<script lang="ts" setup>
import { h } from 'vue';
import { SearchOutlined } from '@ant-design/icons-vue';
</script>
vue3示例：
<script setup>
import {h} from "vue"
import {SearchOutlined} from "@ant-design/icons-vue"
</script>
<template><a-button :icon="h(SearchOutlined)" class="flex items-center">按钮</a-button>
</template>
案例：按钮提示
核心代码：
<a-tooltip title="search"><a-button type="primary" shape="circle" :icon="h(SearchOutlined)" />
</a-tooltip>
vue3示例：
<script setup>
import {h} from "vue"
import {SearchOutlined} from "@ant-design/icons-vue"
</script>
<template><a-tooltip title="这是一个图标按钮"><a-button :icon="h(SearchOutlined)" class="flex items-center">按钮</a-button></a-tooltip>
</template>
下拉按钮
按钮组合使用时，推荐使用 1 个主操作 + n 个次操作，3 个以上操作时把更多操作放到 Dropdown.Button 中组合使用。
核心代码：
<template><a-space><a-button type="primary">Primary</a-button><a-button>secondary</a-button><a-dropdown><template #overlay><a-menu @click="handleMenuClick"><a-menu-item key="1">1st item</a-menu-item><a-menu-item key="2">2nd item</a-menu-item><a-menu-item key="3">3rd item</a-menu-item></a-menu></template><a-button>Actions<DownOutlined /></a-button></a-dropdown></a-space>
</template>
<script lang="ts" setup>
import { DownOutlined } from '@ant-design/icons-vue';
import type { MenuProps } from 'ant-design-vue';
const handleMenuClick: MenuProps['onClick'] = e => {console.log('click', e);
};
</script>
vue3示例：
<script setup>
import {DownOutlined} from "@ant-design/icons-vue"const handleDropdownMenuClick = (e) => {console.log(e)console.log("key=", e.key)
}
</script>
<template><a-dropdown><template #overlay><a-menu @click="handleDropdownMenuClick"><a-menu-item key="1">选项1</a-menu-item><a-menu-item key="2">选项2</a-menu-item><a-menu-item key="3">选项3</a-menu-item></a-menu></template><a-button>下拉按钮<DownOutlined/></a-button></a-dropdown>
</template>
Block 按钮
block 属性将使按钮适合其父宽度。
核心代码：
<template><a-space wrap><a-button type="primary" block>Primary</a-button><a-button block>Default</a-button><a-button type="dashed" block>Dashed</a-button><a-button danger block>Danger</a-button><a-button type="link" block>Link</a-button></a-space>
</template>
vue3示例：
<template><div class="flex p-8 items-center justify-center bg-indigo-50 gap-3"><div class="w-96 h-32 bg-red-300 flex justify-center items-center"><a-button>按钮</a-button></div><div class="w-96 h-32 bg-red-300 flex justify-center items-center"><a-button block>block 按钮</a-button></div></div>
</template>
案例：按钮形状
核心代码：
<a-button type="primary" shape="circle" :icon="h(SearchOutlined)" />
按钮形状支持的值有：default | circle | round
vue3示例：
<template><div class="flex p-8 bg-indigo-50 gap-3"><div class="h-32 flex-1 bg-purple-200 flex justify-center items-center"><a-button shape="default">default</a-button></div><div class="h-32 flex-1 bg-purple-200 flex justify-center items-center"><a-button shape="circle">circle</a-button></div><div class="h-32 flex-1 bg-purple-200 flex justify-center items-center"><a-button shape="round">round</a-button></div></div>
</template>
案例：点击按钮跳转网页
按钮有两个属性：
-
href：点击跳转的地址，指定此属性 button 的行为和 a 链接一致
-
target：相当于 a 链接的 target 属性，href 存在时生效
vue3示例：
<template><a-button href="http://www.baidu.com" target="_blank">百度</a-button>
</template>API
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：type -> shape -> size -> loading -> disabled。
按钮的属性说明如下：
| 属性 | 说明 | 类型 | 默认值 | 版本 |
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
| danger | 设置危险按钮 | boolean | false | 2.2.0 |
| disabled | 按钮失效状态 | boolean | false | |
| ghost | 幽灵属性，使按钮背景透明 | boolean | false | |
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
| htmlType | 设置 button 原生的 type 值，可选值请参考 HTML 标准 | string | button | |
| icon | 设置按钮的图标类型 | v-slot | - | |
| loading | 设置按钮载入状态 | boolean | { delay: number } | false | |
| shape | 设置按钮形状 | default | circle | round |
| size | 设置按钮大小 | large | middle | small |
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
| type | 设置按钮类型 | primary | ghost | dashed |
事件
支持原生 button 的其他所有属性。
| 事件名称 | 说明 | 回调参数 | 版本 |
| click | 点击按钮时的回调 | (event) => void |
方法
| 名称 | 描述 | 版本 |
| blur() | 移除焦点 | |
| focus() | 获取焦点 |