按钮 Button

元素中一种常见的交互控件，用户通过点击或触摸按钮来触发相应的操作，如提交表单、打开新页面、执行某个功能等，它通常具有特定的视觉外观以吸引用户注意并提示其可交互性。

Button

配置项

Full

Disabled

Loading

Shape

Status

Type

Size

基础用法

支持 5 种按钮类型，分别是 normal - 常规（默认），secondary - 次要，plain - 线框，dashed - 虚线，text - 文本，以满足多样化设计与功能需求。

<template>
  <bp-button type="secondary" status="primary">次要按钮</bp-button>
  <bp-button type="normal" status="primary">常规按钮</bp-button>
  <bp-button type="plain" status="primary">线框按钮</bp-button>
  <bp-button type="dashed" status="primary">虚线按钮</bp-button>
  <bp-button type="text" status="primary">文本按钮</bp-button>
</template>

按钮形状

支持 3 种按钮形状，分别是 square - 矩形（默认），roune - 椭圆，circle - 圆。

<template>
  <bp-button shape="square" status="primary">矩形</bp-button>
  <bp-button shape="round" status="primary">椭圆</bp-button>
  <bp-button shape="circle" status="primary">圆</bp-button>
</template>

按钮状态

支持 5 种按钮状态，分别是 gray - 灰度，primary - 主要（默认），success - 成功，warning - 警示，danger - 危险，与按钮类型搭配使用，以增强视觉效果和明确给功能属性。

<template>
  <div class="button-demo">
    <template v-for="status in buttonStatus" :key="status.value">
      <div class="button-row">
        <bp-button v-for="type in buttonTypes" :key="type" :status="status.value" :type>
          {{ status.name }}
        </bp-button>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
const buttonStatus = [
  { name: "灰度", value: "gray" },
  { name: "主色", value: "primary" },
  { name: "成功", value: "success" },
  { name: "警示", value: "warning" },
  { name: "危险", value: "danger" },
] as const;
const buttonTypes = ["secondary", "normal", "plain", "dashed", "text"] as const;
</script>

<style lang="scss" scoped>
.button-demo {
  .button-row {
    margin-bottom: 8px;
  }
}
</style>

按钮尺寸

支持 4 种按钮尺寸，分别是 mini - 迷你，small - 小型，default - 普通（默认），large - 大型。

<template>
  <bp-button size="mini">迷你</bp-button>
  <bp-button size="small">小型</bp-button>
  <bp-button size="default">普通</bp-button>
  <bp-button size="large">大型</bp-button>
</template>

加载中

支持通过 loading 属性设置按钮是否处于加载中状态，此时按钮不可点击，而且可以通过 loading-icon 属性自定义加载中的图标。

<template>
  <bp-button :loading type="plain" status="primary">{{ loading ? "保存中" : "保存" }}</bp-button>
  <bp-button :loading :icon="IconUploadCloudLine" type="plain" shape="circle" status="primary"></bp-button>
  <bp-button type="text" status="primary" @click="onChange">切换</bp-button>
</template>

<script lang="ts" setup>
import { IconUploadCloudLine } from "birdpaper-icon";
import { ref } from "vue";

const loading = ref(false);
const onChange = () => {
  loading.value = !loading.value;
};
</script>

提示

loading-icon 属性支持传入 number 类型，由 1-5 之间的数字来展示对应的加载图标，也可以传入 Component 组件进行自定义 Icon。

图标按钮

通过 icon 属性设置按钮的图标，增强视觉吸引力，提升按钮信息传达效率，节省空间。

<template>
  <bp-button :icon="IconSearch2Line" type="normal" status="primary">搜索</bp-button>
  <bp-button :icon="IconDeleteBin6Line" type="plain" status="danger">确认删除</bp-button>
  <bp-button :icon="IconShareFill" type="plain" status="primary"></bp-button>
  <bp-button :icon="IconUploadCloud2Line" type="text" status="primary">上传</bp-button>
</template>

<script setup lang="ts">
import { IconShareFill, IconSearch2Line, IconDeleteBin6Line, IconUploadCloud2Line } from "birdpaper-icon";
</script>

按钮组

将相关按钮组合在一起，以便更有效的布局和管理操作，简化页面结构。

<template>
  <bp-space>
    <bp-button-group type="plain">
      <bp-button> <i class="ri-arrow-left-s-line"></i> 上一页</bp-button>
      <bp-button>下一页 <i class="ri-arrow-right-s-line"></i></bp-button>
    </bp-button-group>

    <bp-button-group type="plain" status="primary">
      <bp-button :icon="IconHeart3Fill"></bp-button>
      <bp-button :icon="IconStarFill"></bp-button>
      <bp-button :icon="IconThumbUpFill"></bp-button>
    </bp-button-group>

    <bp-button-group type="normal" status="primary">
      <bp-button>更多</bp-button>
      <bp-button :icon="IconArrowDownSLine"></bp-button>
    </bp-button-group>
  </bp-space>
</template>

<script setup lang="ts">
import { IconArrowDownSLine, IconHeart3Fill, IconStarFill, IconThumbUpFill } from "birdpaper-icon";
</script>

Button 属性

type	按钮类型	ButtonType	secondary	-
attr-type	原生Type属性	ButtonNavtiveType	button	-
status	按钮状态	ButtonStatus	gray	-
size	按钮尺寸	ButtonSize	default	-
shape	按钮形状	ButtonShape	square	-
disabled	是否禁用	Boolean	-	-
loading	是否加载	Boolean	-	-
loading-icon	加载图标	NumberIcon	1	-
full	宽度是否撑满父级	Boolean	-	-
icon	按钮图标	Icon	-	-

ButtonGroup 属性

type	按钮类型	ButtonType	secondary	-
status	按钮状态	ButtonStatus	gray	-
size	按钮尺寸	ButtonSize	default	-
shape	按钮形状	ButtonShape	square	-
disabled	是否禁用	Boolean	-	-

Button 事件

click	点击触发	--	-

Button 插槽

default	默认插槽	-	-