Button 按钮

按钮用于开始一个即时操作。

何时使用

标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。

在 Ant Design Vue 中我们提供了五种按钮。

以及四种状态属性与上面配合使用。

代码演示

按钮类型

按钮有五种类型：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。

<template>
  <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>
</template>
幽灵按钮

幽灵按钮将按钮的内容反色，背景变为透明，常用在有色背景上。

<template>
  <div :style="{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }">
    <a-button type="primary" ghost>Primary</a-button>
    <a-button ghost>Default</a-button>
    <a-button type="dashed" ghost>Dashed</a-button>
    <a-button danger ghost>Danger</a-button>
    <a-button type="link" ghost>Link</a-button>
  </div>
</template>


加载中状态

添加 loading 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。

<template>
  <a-button type="primary" loading>Loading</a-button>
  <a-button type="primary" size="small" loading>Loading</a-button>
  <br />
  <a-button type="primary" :loading="loading" @mouseenter="loading = true">mouseenter me!</a-button>
  <a-button type="primary" icon="poweroff" :loading="iconLoading" @click="enterIconLoading">
    延迟1s
  </a-button>
  <br />
  <a-button type="primary" loading />
  <a-button type="primary" shape="circle" loading />
  <a-button danger shape="round" loading />
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';

interface DelayLoading {
  delay: number;
}
export default defineComponent({
  setup() {
    const iconLoading = ref<boolean | DelayLoading>(false);
    const enterIconLoading = () => {
      iconLoading.value = { delay: 1000 };

      setTimeout(() => {
        iconLoading.value = false;
      }, 6000);
    };
    return {
      loading: ref(false),
      iconLoading,
      enterIconLoading,
    };
  },
});
</script>




按钮尺寸

按钮有大、中、小三种尺寸。

通过设置 size 为 large small 分别把按钮设为大、小尺寸。若不设置 size，则尺寸为中。

<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>
  <br />
  <br />
  <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>
  <br />
  <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 />
      Download
    </template>
  </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>
  <br />
</template>
<script lang="ts">
import { DownloadOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref } from 'vue';
export default defineComponent({
  components: {
    DownloadOutlined,
  },
  setup() {
    return {
      size: ref('large'),
    };
  },
});
</script>
危险按钮

在 2.2.0 之后，危险成为一种按钮属性而不是按钮类型。

<template>
  <div>
    <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>
  </div>
</template>








不可用状态

添加 disabled 属性即可让按钮处于不可用状态，同时按钮样式也会改变。

<template>
  <a-button type="primary">Primary</a-button>
  <a-button type="primary" disabled>Primary(disabled)</a-button>
  <br />
  <a-button>Default</a-button>
  <a-button disabled>Default(disabled)</a-button>
  <br />
  <a-button type="dashed">Dashed</a-button>
  <a-button type="dashed" disabled>Dashed(disabled)</a-button>
  <br />
  <a-button type="text">Text</a-button>
  <a-button type="text" disabled>Text(disabled)</a-button>
  <br />
  <a-button type="link">Link</a-button>
  <a-button type="link" disabled>Link(disabled)</a-button>
  <br />
  <a-button danger>Danger Default</a-button>
  <a-button danger disabled>Danger Default(disabled)</a-button>
  <br />
  <a-button type="text" danger>Danger Text</a-button>
  <a-button type="text" danger disabled>Danger Text(disabled)</a-button>
  <br />
  <a-button type="link" danger>Danger Link</a-button>
  <a-button type="link" danger disabled>Danger Link(disabled)</a-button>
  <br />

  <div :style="{ padding: '8px 8px 0 8px', background: 'rgb(190, 200, 200)' }">
    <a-button ghost>Ghost</a-button>
    <a-button ghost disabled>Ghost(disabled)</a-button>
  </div>
</template>
图标按钮

当需要在 Button 内嵌入 Icon 时，可以设置 icon 属性，或者直接在 Button 内使用 Icon 组件。

如果想控制 Icon 具体的位置，只能直接使用 Icon 组件，而非 icon 属性。

<template>
  <a-button type="primary" shape="circle">
    <template #icon><SearchOutlined /></template>
  </a-button>
  <a-button type="primary" shape="circle">A</a-button>
  <a-button type="primary">
    <template #icon><SearchOutlined /></template>
    Search
  </a-button>
  <a-button shape="circle">
    <template #icon><SearchOutlined /></template>
  </a-button>
  <a-button>
    <template #icon><SearchOutlined /></template>
    Search
  </a-button>
  <a-button shape="circle">
    <template #icon><SearchOutlined /></template>
  </a-button>
  <a-button>
    <template #icon><SearchOutlined /></template>
    Search
  </a-button>
  <a-button type="dashed" shape="circle">
    <template #icon><SearchOutlined /></template>
  </a-button>
  <a-button type="dashed">
    <template #icon><SearchOutlined /></template>
    Search
  </a-button>
</template>
<script>
import { SearchOutlined } from '@ant-design/icons-vue';
export default {
  components: {
    SearchOutlined,
  },
};
</script>
多个按钮组合

按钮组合使用时，推荐使用 1 个主操作 + n 个次操作，3 个以上操作时把更多操作放到 Dropdown.Button 中组合使用。

<template>
  <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>
</template>
<script lang="ts">
import { DownOutlined } from '@ant-design/icons-vue';
import { defineComponent } from 'vue';
export default defineComponent({
  components: {
    DownOutlined,
  },
  setup() {
    const handleMenuClick = (e: Event) => {
      console.log('click', e);
    };
    return {
      handleMenuClick,
    };
  },
});
</script>
Block 按钮

block 属性将使按钮适合其父宽度。

<template>
  <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>
</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 设置按钮形状 circle | round -
size 设置按钮大小 large | middle | small middle
target 相当于 a 链接的 target 属性，href 存在时生效 string -
type 设置按钮类型 primary | ghost | dashed | link | text | default default

事件

事件名称 说明 回调参数 版本
click 点击按钮时的回调 (event) => void