Button 按钮

常用的操作按钮。

基础用法

使用 type、plain、round 和 circle 来定义按钮的样式。

<template>
  <Button>默认按钮</Button>
  <Button type="primary">主要按钮</Button>
  <Button type="success">成功按钮</Button>
  <Button type="info">信息按钮</Button>
  <Button type="warning">警告按钮</Button>
  <Button type="danger">危险按钮</Button>
</template>

<script setup>
import Button from '@/components/Button/Button.vue'
</script>

<template>
  <Button round>默认按钮</Button>
  <Button type="primary" round>主要按钮</Button>
  <Button type="success" round>成功按钮</Button>
  <Button type="info" round>信息按钮</Button>
  <Button type="warning" round>警告按钮</Button>
  <Button type="danger" round>危险按钮</Button>
</template>

<script setup>
import Button from '@/components/Button/Button.vue'
</script>

禁用状态

按钮不可用状态。

<template>
  <Button disabled>禁用按钮</Button>
  <Button type="primary" disabled>主要按钮</Button>
  <Button type="success" disabled>成功按钮</Button>
  <Button type="info" disabled>信息按钮</Button>
  <Button type="warning" disabled>警告按钮</Button>
  <Button type="danger" disabled>危险按钮</Button>
</template>

<script setup>
import Button from '@/components/Button/Button.vue'
</script>

文字按钮

没有边框和背景色的按钮。

<template>
  <Button text>文字按钮</Button>
  <Button type="primary" text>主要按钮</Button>
  <Button type="success" text>成功按钮</Button>
  <Button type="info" text>信息按钮</Button>
  <Button type="warning" text>警告按钮</Button>
  <Button type="danger" text>危险按钮</Button>
</template>

<script setup>
import Button from '@/components/Button/Button.vue'
</script>

图标按钮

带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。

<template>
  <div style="margin-bottom: 20px">
    <Button type="primary" icon="search">搜索</Button>
    <Button icon="edit">编辑</Button>
    <Button type="info" icon="message">信息按钮</Button>
    <Button type="danger" icon="trash">危险按钮</Button>
    <Button type="success" icon="share">分享</Button>
  </div>
  <div>
    <Button type="primary" icon="search" circle></Button>
    <Button icon="edit" circle></Button>
    <Button type="success" icon="share" circle></Button>
  </div>
</template>

<script setup>
import Button from '@/components/Button/Button.vue'
</script>

加载中

点击按钮后进行数据加载操作，在按钮上显示加载状态。

<template>
  <Button type="primary" loading>加载中</Button>
</template>

<script setup>
import Button from '@/components/Button/Button.vue'
</script>

不同尺寸

Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。

<template>
  <Button type="primary" size="large">大型按钮</Button>
  <Button type="primary">默认按钮</Button>
  <Button type="primary" size="small">小型按钮</Button>
</template>

<script setup>
import Button from '@/components/Button/Button.vue'
</script>

Button Attributes

Name	Description	Type	Default
size	button size	enum - 'large'| 'small'	—
type	button type	enum - 'primary'| 'success'| 'warning'| 'danger'| 'info'	—
plain	determine whether it's a plain button	boolean	false
round	determine whether it's a round button	boolean	false
circle	determine whether it's a circle button	boolean	false
loading	determine whether it's loading	boolean	false
disabled	disable the button	boolean	false
icon	icon component	string	—
autofocus	same as native button's autofocus	boolean	false
native-type	same as native button's type	enum - 'button'| 'submit'| 'reset'	button