Button 按钮

过去无法挽回，未来可以改变

基础用法

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

<script setup lang="ts">
import { Alarm } from '@vicons/ionicons5'
</script>

<template>
  <div class="show-row">
    <c-button>Default</c-button>
    <c-button type="primary">Primary</c-button>
    <c-button type="success">Success</c-button>
    <c-button type="warning">Warning</c-button>
    <c-button type="danger">Danger</c-button>
    <c-button type="info">Info</c-button>
  </div>

  <div class="show-row">
    <c-button plain>Plain</c-button>
    <c-button type="primary" plain>Primary</c-button>
    <c-button type="success" plain>Success</c-button>
    <c-button type="warning" plain>Warning</c-button>
    <c-button type="danger" plain>Danger</c-button>
    <c-button type="info" plain>Info</c-button>
  </div>

  <div class="show-row">
    <c-button round>Round</c-button>
    <c-button type="primary" round>Primary</c-button>
    <c-button type="success" round>Success</c-button>
    <c-button type="warning" round>Warning</c-button>
    <c-button type="danger" round>Danger</c-button>
    <c-button type="info" round>Info</c-button>
  </div>

  <div class="show-row">
    <c-button circle :icon="Alarm" />
    <c-button type="primary" circle :icon="Alarm" />
    <c-button type="success" circle :icon="Alarm" />
    <c-button type="warning" circle :icon="Alarm" />
    <c-button type="danger" circle :icon="Alarm" />
    <c-button type="info" circle>
      <c-icon>
        <Alarm />
      </c-icon>
    </c-button>
  </div>
</template>

禁用状态

使用 disabled 属性即可完成实现按钮的禁用，此属性接收一个 Boolean 的值

<script setup lang="ts"></script>

<template>
  <div class="show-row">
    <c-button disabled>Default</c-button>
    <c-button type="primary" disabled>Primary</c-button>
    <c-button type="success" disabled>Success</c-button>
    <c-button type="info" disabled>Info</c-button>
    <c-button type="warning" disabled>Warning</c-button>
    <c-button type="danger" disabled>Danger</c-button>
  </div>

  <div class="show-row">
    <c-button disabled plain>Default</c-button>
    <c-button type="primary" disabled plain>Primary</c-button>
    <c-button type="success" disabled plain>Success</c-button>
    <c-button type="info" disabled plain>Info</c-button>
    <c-button type="warning" disabled plain>Warning</c-button>
    <c-button type="danger" disabled plain>Danger</c-button>
  </div>
</template>

图标按钮

使用 icon 属性即可实现插入图标，图标组件可以在 xicons 获取，下面将会展示几种不同的图标使用方式

<script setup lang="ts">
import { Alarm, Search, Airplane } from '@vicons/ionicons5'
import { AddCircle32Filled, SubtractCircle32Filled } from '@vicons/fluent'
</script>

<template>
  <div class="show-row">
    <c-button type="primary" :icon="Alarm" circle></c-button>
    <c-button type="primary" :icon="Search">搜索</c-button>
    <c-button type="primary" :icon="Search" icon-placement="right"
      >搜索</c-button
    >
    <c-button type="primary">
      <c-icon :size="18"> <AddCircle32Filled /> </c-icon>
      增加
    </c-button>
    <c-button type="primary">
      减少
      <c-icon :size="18"> <SubtractCircle32Filled /> </c-icon>
    </c-button>
    <c-button type="primary" icon-placement="right">
      <template #icon>
        <Airplane />
      </template>
      出行
    </c-button>
  </div>
</template>

按钮组

当你多项操作所属一类时，那么使用按钮组可能会有更好的效果

<script setup lang="ts">
import { Alarm, Boat, EarthSharp } from '@vicons/ionicons5'
import { ChevronLeft28Regular, ChevronRight28Regular } from '@vicons/fluent'
</script>

<template>
  <div class="show-row">
    <c-button-group type="primary">
      <c-button>
        <c-icon size="18">
          <ChevronLeft28Regular />
        </c-icon>
        上一页
      </c-button>
      <c-button>
        下一页
        <c-icon size="18">
          <ChevronRight28Regular />
        </c-icon>
      </c-button>
    </c-button-group>

    <c-button-group type="success">
      <c-button>
        <c-icon size="18">
          <Alarm />
        </c-icon>
      </c-button>
      <c-button>
        <c-icon size="18">
          <Boat />
        </c-icon>
      </c-button>
      <c-button>
        <c-icon size="18">
          <EarthSharp />
        </c-icon>
      </c-button>
    </c-button-group>
  </div>
</template>

加载状态按钮

使用 loading 的属性为 true 或 false 来控制按钮的加载状态，loading-text 可以附加一些文本说明

<script setup lang="ts">
import { ref } from 'vue'

const loading1 = ref(false)
const loading2 = ref(false)

const handleClick1 = () => {
  loading1.value = true
  setTimeout(() => {
    loading1.value = false
  }, 3000)
}

const handleClick2 = () => {
  loading2.value = true
  setTimeout(() => {
    loading2.value = false
  }, 3000)
}
</script>

<template>
  <div class="show-row">
    <c-button :loading="loading1" @click="handleClick1" loading-text="..."
      >请点击-1</c-button
    >
    <c-button
      type="primary"
      :loading="loading2"
      @click="handleClick2"
      loading-text="......"
      >请点击-2</c-button
    >
  </div>
</template>

按钮尺寸

除了默认的大小之外，还提供 large 和 small 两种尺寸供选择

<script setup lang="ts">
import { Alarm } from '@vicons/ionicons5'
</script>

<template>
  <div class="show-row">
    <c-button size="large">large</c-button>
    <c-button size="default">default</c-button>
    <c-button size="small">small</c-button>
    <c-button :icon="Alarm" size="large" circle />
    <c-button :icon="Alarm" size="default" circle />
    <c-button :icon="Alarm" size="small" circle />
  </div>
</template>

Button API

Button 属性

属性名	说明	类型	默认值
type	类型	'' / 'primary' / 'success' / 'warning' / 'danger' / 'info'	--
size	尺寸	'large' / 'default' / 'small' / ''	--
plain	是否为朴素按钮	boolean	false
round	是否为圆角按钮	boolean	false
circle	是否为圆形按钮	boolean	false
icon	图标组件 xicons	object	--
icon-placement	icon 位置	'left' / 'right'	'left'
disabled	是否禁用按钮	boolean	false
loading	是否为加载中状态	boolean	false
loading-text	加载时需要显示的文本	string	--
native-type	原生 type 属性	'submit' / 'button' / 'reset'	'button'

Button 事件

名称	说明	类型
click	点击按钮后触发	Function

Button 插槽

插槽名	说明
default	自定义默认内容
icon	自定义图标组件

ButtonGroup API

ButtonGroup 属性

属性名	说明	类型	默认值
type	类型	'' / 'primary' / 'success' / 'warning' / 'danger' / 'info'	--
size	尺寸	'large' / 'default' / 'small'	--

ButtonGroup 插槽

插槽名	说明
default	自定义默认内容