Button 按钮

常用的操作按钮

基础用法

使用 primary success warning danger info 来定义按钮的主题样式。
使用 plain round circle 来定义按钮的形状

vue
<template>
  <div class="button-wrapper">
    <div class="button-row">
      <ap-button>default</ap-button>
      <ap-button primary>primary</ap-button>
      <ap-button success>success</ap-button>
      <ap-button danger>danger</ap-button>
      <ap-button info>info</ap-button>
      <ap-button warning>warning</ap-button>
    </div>
    <div class="button-row">
      <ap-button plain>plain</ap-button>
      <ap-button primary plain>primary</ap-button>
      <ap-button success plain>success</ap-button>
      <ap-button danger plain>danger</ap-button>
      <ap-button info plain>info</ap-button>
      <ap-button warning plain>warning</ap-button>
    </div>
    <div class="button-row">
      <ap-button round>default</ap-button>
      <ap-button primary round>primary</ap-button>
      <ap-button success round>success</ap-button>
      <ap-button danger round>danger</ap-button>
      <ap-button info round>info</ap-button>
      <ap-button warning round>warning</ap-button>
    </div>

    <div class="button-row">
      <ap-button circle>
        <template #icon>
          <User />
        </template>
      </ap-button>
      <ap-button primary circle>
        <template #icon>
          <Bell />
        </template>
      </ap-button>
      <ap-button success circle>
        <template #icon>
          <Lock />
        </template>
      </ap-button>
      <ap-button danger circle>
        <template #icon>
          <User />
        </template>
      </ap-button>
      <ap-button info circle>
        <template #icon>
          <ChatSquare />
        </template>
      </ap-button>
      <ap-button warning circle>
        <template #icon>
          <Warning />
        </template>
      </ap-button>
    </div>
  </div>
</template>

<style scoped>
.button-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.button-row {
  display: flex;
  gap: 10px;
}
</style>

文字按钮

没有边框和背景色的按钮，设置 bg 字段设置文字按钮是否有背景

vue
<template>
  <div class="button-wrapper">
    <div class="button-row">
      <ap-button text>default</ap-button>
      <ap-button primary text>primary</ap-button>
      <ap-button success text>success</ap-button>
      <ap-button danger text>danger</ap-button>
      <ap-button info text>info</ap-button>
      <ap-button warning text>warning</ap-button>
    </div>
    <div class="button-row">
      <ap-button text bg>default</ap-button>
      <ap-button primary text bg>primary</ap-button>
      <ap-button success text bg>success</ap-button>
      <ap-button danger text bg>danger</ap-button>
      <ap-button info text bg>info</ap-button>
      <ap-button warning text bg>warning</ap-button>
    </div>
  </div>
</template>

<style scoped>
.button-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.button-row {
  display: flex;
  gap: 10px;
}
</style>

禁用状态

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

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

vue
<template>
  <div class="button-wrapper">
    <div class="button-row">
      <ap-button disabled>default</ap-button>
      <ap-button primary disabled>primary</ap-button>
      <ap-button success disabled>success</ap-button>
      <ap-button danger disabled>danger</ap-button>
      <ap-button info disabled>info</ap-button>
      <ap-button warning disabled>warning</ap-button>
    </div>
    <div class="button-row">
      <ap-button plain disabled>plain</ap-button>
      <ap-button primary plain disabled>primary</ap-button>
      <ap-button success plain disabled>success</ap-button>
      <ap-button danger plain disabled>danger</ap-button>
      <ap-button info plain disabled>info</ap-button>
      <ap-button warning plain disabled>warning</ap-button>
    </div>
    <div class="button-row">
      <ap-button text disabled>text</ap-button>
      <ap-button primary text disabled>primary</ap-button>
      <ap-button success text disabled>success</ap-button>
      <ap-button danger text disabled>danger</ap-button>
      <ap-button info text disabled>info</ap-button>
      <ap-button warning text disabled>warning</ap-button>
    </div>
    <div class="button-row">
      <ap-button disabled :href="link">default</ap-button>
      <ap-button disabled primary :href="link">primary</ap-button>
      <ap-button disabled success :href="link">success</ap-button>
      <ap-button disabled danger :href="link">danger</ap-button>
      <ap-button disabled info :href="link">info</ap-button>
      <ap-button disabled warning :href="link">warning</ap-button>
    </div>
  </div>
</template>

<script setup lang="ts">
const link = 'http://www.baidu.com'
</script>

<style scoped>
.button-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.button-row {
  display: flex;
  gap: 10px;
}
</style>

按钮大小

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

可使用large和small来设置按钮大小。

vue
<template>
  <div class="button-wrapper">
    <div class="button-row">
      <div class="button-label">small:</div>
      <ap-button primary small>small</ap-button>
      <ap-button primary plain small>small</ap-button>
      <ap-button circle small>
        <template #icon>
          <User />
        </template>
      </ap-button>
    </div>
    <div class="button-row">
      <div class="button-label">default:</div>
      <ap-button primary>default</ap-button>
      <ap-button primary plain>default</ap-button>
      <ap-button circle>
        <template #icon>
          <User />
        </template>
      </ap-button>
    </div>
    <div class="button-row">
      <div class="button-label">large:</div>
      <ap-button primary large>large</ap-button>
      <ap-button primary plain large>large</ap-button>
      <ap-button circle large>
        <template #icon>
          <User />
        </template>
      </ap-button>
    </div>
  </div>
</template>

<style scoped>
.button-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}
.button-label {
  width: 60px;
}
.button-row {
  display: flex;
  gap: 20px;
}
</style>

链接按钮

可以通过设置 href 属性，将按钮设置为链接按钮，并跳转至指定链接

vue
<template>
  <ap-button :href="link">default</ap-button>
  <ap-button primary :href="link">primary</ap-button>
  <ap-button success :href="link">success</ap-button>
  <ap-button danger :href="link">danger</ap-button>
  <ap-button info :href="link">info</ap-button>
  <ap-button warning :href="link">warning</ap-button>
</template>

<script setup lang="ts">
const link = 'http://www.baidu.com'
</script>

加载状态

通过设置 loading 属性，将按钮设置为加载状态，显示加载按钮，同时可以通过插槽自定义加载状态的 icon，或者通过 loadingIcon 属性指定图标

vue
<template>
  <div class="button-wrapper">
    <ap-button primary loading> 加载中 </ap-button>
    <ap-button primary loading>
      <template #loading>
        <Loading />
      </template>
      加载中
    </ap-button>
    <ap-button primary loading :loading-icon="Star"> </ap-button>
  </div>
</template>

<script lang="ts" setup>
import { Star } from '@apathia/icons-vue'
</script>

<style scoped>
.button-wrapper {
  display: flex;
  gap: 20px;
}
</style>

自定义 tag 按钮

通过 tag 指定按钮的元素类型

vue
<template>
  <div class="button-wrapper">
    <ap-button primary> button </ap-button>
    <ap-button primary tag="a"> a </ap-button>
    <ap-button primary tag="div"> div </ap-button>
  </div>
</template>

<style scoped>
.button-wrapper {
  display: flex;
  gap: 20px;
}
</style>

Button Props

prop	说明	类型	默认值
tag	按钮 tag 类型	div \| button \| a	button
href	是否为链接	string	''
primary	是否为主要模式	boolean	false
success	是否为成功模式	boolean	false
danger	是否为危险模式	boolean	false
info	是否为信息模式	boolean	false
warning	是否为警告模式	boolean	false
plain	是否为简单模式	boolean	false
text	是否为文字按钮	boolean	false
loading	是否为加载状态	boolean	false
loadingIcon	加载状态的按钮	Component	false
bg	文字按钮是否有背景色	boolean	false
small	小尺寸	boolean	false
large	大尺寸	boolean	false
disabled	禁用	boolean	false

Button Slots

插槽名称	说明	参数
default	显示内容	-
icon	图标	-
loading	加载图标	-

Button 按钮 ​

基础用法 ​

文字按钮 ​

禁用状态 ​

按钮大小 ​

链接按钮 ​

加载状态 ​

自定义 tag 按钮 ​

Button Props ​

Button Slots ​