Button 按钮

BzButton 用于触发常见操作。

基础用法

基础用法

Vue Demo

可直接复制并在项目中使用

<template>
  <div style="display: flex; gap: 12px; flex-wrap: wrap;">
    <BzButton label="Primary Button" />
    <BzButton type="success" plain>Success Plain</BzButton>
  </div>
</template>

类型示例

按钮类型

Vue Demo

可直接复制并在项目中使用

<template>
  <div style="display: flex; gap: 12px; flex-wrap: wrap;">
    <BzButton label="Primary" />
    <BzButton type="success" label="Success" />
    <BzButton type="warning" label="Warning" />
    <BzButton type="danger" label="Danger" />
    <BzButton type="info" label="Info" />
  </div>
</template>

尺寸与状态

尺寸与禁用态

Vue Demo

可直接复制并在项目中使用

<template>
  <div style="display: flex; gap: 12px; flex-wrap: wrap; align-items: center;">
    <BzButton size="small" label="Small" />
    <BzButton size="medium" label="Medium" />
    <BzButton size="large" label="Large" />
    <BzButton disabled label="Disabled" />
  </div>
</template>

圆角与朴素样式

样式组合

Vue Demo

可直接复制并在项目中使用

<template>
  <div style="display: flex; gap: 12px; flex-wrap: wrap;">
    <BzButton plain label="Plain" />
    <BzButton round label="Round" />
    <BzButton type="success" plain round label="Plain Round" />
  </div>
</template>

点击事件

点击事件

Vue Demo

可直接复制并在项目中使用

<script setup lang="ts">
function handleClick(event: MouseEvent) {
  console.log('button clicked', event)
}
</script>

<template>
  <BzButton label="点击我" @click="handleClick" />
</template>

插槽用法

当同时传入默认插槽和 label 时，默认插槽优先级更高：

默认插槽

Vue Demo

可直接复制并在项目中使用

<template>
  <BzButton type="primary">
    自定义按钮内容
  </BzButton>
</template>

Props

参数	说明	类型	默认值
type	按钮类型测试	'primary' | 'success' | 'warning' | 'danger' | 'info'	'primary'
size	按钮尺寸	'small' | 'medium' | 'large'	'medium'
disabled	是否禁用	boolean	false
plain	是否朴素按钮	boolean	false
round	是否圆角按钮	boolean	false
circle	是否圆形按钮	boolean	false
label	默认文案	string	''

Events

事件名	说明	回调参数
click	点击按钮时触发	event: MouseEvent

Slots

插槽名	说明
default	自定义按钮内容，优先于 label