Button 按钮

常用的操作按钮。

基础用法

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

<script setup>

</script>
<template>
  <div class="button-example">
    <div class="button-row">
      <vk-button>Default</vk-button>
      <vk-button type="primary">Primary</vk-button>
      <vk-button type="success">Success</vk-button>
      <vk-button type="info">Info</vk-button>
      <vk-button type="warning">Warning</vk-button>
      <vk-button type="danger">Danger</vk-button>
    </div>
    <div class="button-row">
      <vk-button  plain>Plain</vk-button>
      <vk-button type="primary" plain>Primary</vk-button>
      <vk-button type="success" plain>Success</vk-button>
      <vk-button type="info" plain>Info</vk-button>
      <vk-button type="warning" plain>Warning</vk-button>
      <vk-button type="danger" plain>Danger</vk-button>
    </div>
    <div class="button-row">
      <vk-button  round>round</vk-button>
      <vk-button type="primary" round>Primary</vk-button>
      <vk-button type="success" round>Success</vk-button>
      <vk-button type="info" round>Info</vk-button>
      <vk-button type="warning" round>Warning</vk-button>
      <vk-button type="danger" round>Danger</vk-button>
    </div>
    <div class="button-row">
      <vk-button  circle icon="fa-search" ></vk-button>
      <vk-button type="primary" circle icon="fa fa-search-plus"></vk-button>
      <vk-button type="success" circle icon="fa fa-angle-double-right"></vk-button>
      <vk-button type="info" circle  icon="fa-shuttle-van"></vk-button>
      <vk-button type="warning" circle icon="fa-sync-alt"></vk-button>
      <vk-button type="danger" circle icon="address-card"></vk-button>
    </div>
  </div>
</template>

<style scoped>
.button-example {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.button-row > * {
  margin: 0;
}
</style>

禁用状态

你可以使用 disabled 属性来定义按钮是否被禁用。

使用 disabled 属性来控制按钮是否为禁用状态。 该属性接受一个 Boolean 类型的值。

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

<style scoped>
.button-example {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.button-row > * {
  margin: 0;
}
</style>

图标按钮

使用图标为按钮添加更多的含义。 你也可以单独使用图标不添加文字来节省显示区域占用。

<script setup>
</script>
<template>
  <div class="button-example">
    <div class="button-row">
      <vk-button   icon="fa-search" >search</vk-button>
      <vk-button type="primary"  icon="fa-search-plus"></vk-button>
      <vk-button type="success"  icon="fa-angle-double-right"></vk-button>
      <vk-button type="info"   icon="fa-shuttle-van"></vk-button>
      <vk-button type="warning"  icon="fa-sync-alt"></vk-button>
      <vk-button type="danger"  icon="address-card"></vk-button>
    </div>
  </div>
</template>

<style scoped>
.button-example {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.button-row > * {
  margin: 0;
}
</style>

加载状态按钮

点击按钮来加载数据，并向用户反馈加载状态。

通过设置 loading 属性为 true 来显示加载中状态。

<script setup>
</script>
<template>
  <div class="button-example">
    <div class="button-row">
      <vk-button  loading>Loading</vk-button>
      <vk-button  loading type="primary">Loading</vk-button>
      <vk-button  loading type="success">Loading</vk-button>
      <vk-button  loading type="info">Loading</vk-button>
      <vk-button  loading type="warning">Loading</vk-button>
    </div>
  </div>
</template>

<style scoped>
.button-example {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.button-row > * {
  margin: 0;
}
</style>

调整尺寸

除了默认的大小，按钮组件还提供了几种额外的尺寸可供选择，以便适配不同的场景。

使用 size 属性额外配置尺寸，可使用large和small两种值。

<script setup>
</script>
<template>
  <div class="button-example">
    <div class="button-row">
      <vk-button type="primary" size="small">small</vk-button>
      <vk-button >Default</vk-button>
      <vk-button type="success" size="large">large</vk-button>
    </div>
  </div>
</template>

<style scoped>
.button-example {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.button-row > * {
  margin: 0;
}
</style>

Button API

属性名	说明	类型	默认值
size	尺寸	enum - 'large'| 'small'	—
type	按钮类型	enum - 'primary'| 'success'| 'warning'| 'danger'| 'info'	—
plain	是否为朴素按钮	boolean	false
round	是否为朴素按钮	boolean	false
circle	是否为圆形按钮	boolean	false
loading	是否为加载中状态	boolean	false
disabled	按钮是否为禁用状态	boolean	false
icon	图标组件	string	—
autofocus	原生 autofocus 属性	boolean	false
native-type	原生 type 属性	enum - 'button'| 'submit'| 'reset'	button