Button 按钮

常用的操作按钮，适用于各种交互场景，提供简洁直观的操作入口。

代码演示

基础用法

按钮组件提供多种样式组合，通过 type 定义主色调，plain 控制简约风格，round 调整圆角效果，满足不同场景的视觉需求。

使用方法

type 设置按钮类型，可选值：primary（主按钮）、success（成功）、warning（警告）、danger（危险）、info（信息）

plain 启用简约样式（无背景色，仅边框和文字着色）

round 启用圆角样式（默认直角）

<template>
  <div class="row">
    <p-button type="primary">Primary</p-button>
    <p-button type="info">Info</p-button>
    <p-button type="success">Success</p-button>
    <p-button type="warning">Warning</p-button>
    <p-button type="danger">Danger</p-button>
  </div>
  <div class="row">
    <p-button type="primary" plain>Primary</p-button>
    <p-button type="info" plain>Info</p-button>
    <p-button type="success" plain>Success</p-button>
    <p-button type="warning" plain>Warning</p-button>
    <p-button type="danger" plain>Danger</p-button>
  </div>
  <div class="row">
    <p-button type="primary" round>Primary</p-button>
    <p-button type="info" round>Info</p-button>
    <p-button type="success" round>Success</p-button>
    <p-button type="warning" round>Warning</p-button>
    <p-button type="danger" round>Danger</p-button>
  </div>
</template>

禁用状态

按钮组件支持禁用状态，禁用时自动应用 cursor: not-allowed 样式，直观提示用户不可点击。

使用方法

通过 disabled 属性控制按钮禁用状态，禁用时按钮不可交互并显示禁用样式。

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

调整尺寸

按钮组件提供多种预设尺寸，方便适配不同场景的布局需求。

使用方法

通过 size 属性设置按钮尺寸，可选值包括 small、medium（默认） 和 large。

<template>
  <div class="row">
    <p-button size="small">Small</p-button>
    <p-button size="medium">Medium</p-button>
    <p-button size="large">Large</p-button>
  </div>
</template>

加载状态

加载状态按钮组件，用于显示加载中的状态。

使用方法

可以通过将 loading 属性设为 true 来激活加载状态提示。

<template>
  <div class="row">
    <p-button 
      :loading="loading" 
      @click="handleClick">{{ loading ? '加载中...' : '点我' }}
    </p-button>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const loading = ref(false);

const handleClick = () => {
  loading.value = true;
  // 模拟耗时操作
  setTimeout(() => {
    loading.value = false;
  }, 3000);
}
</script>

API

属性

属性名	说明	类型	默认值
size	按钮尺寸	small | medium | large	medium
type	按钮类型	primary | success | warning | danger | info	primary
plain	是否朴素按钮	boolean	false
round	是否圆角按钮	boolean	false
disabled	是否禁用状态	boolean	false

插槽

插槽名	说明
default	设置按钮显示的内容

显式暴露

名称	类型	中文说明
ref	HTMLElement	button 的 HTML 元素
type	ButtonType	按钮类型
disabled	boolean	是否禁用状态
nativeType	'button' | 'submit' | 'reset'	原生 button 的 type 属性