Button 按钮

按钮组件用于触发操作。

在线演示（可编辑）

你可以直接编辑下面的代码来试验按钮的各种属性：

基础用法

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

朴素按钮

圆角按钮

禁用按钮

加载中按钮

按钮尺寸

除了默认尺寸，按钮组件还提供了三种额外的尺寸供你在不同场景下选择。

API

Button Props

Name	Type	Default	Description
type	'default' | 'primary' | 'success' | 'warning' | 'danger'	'default'	按钮类型
size	'small' | 'medium' | 'large'	'medium'	按钮尺寸
native-type	'button' | 'submit' | 'reset'	'button'	原生 button 的 type 属性
disabled	boolean	false	是否禁用按钮
loading	boolean	false	是否为加载中状态
round	boolean	false	是否为圆角按钮
plain	boolean	false	是否为朴素按钮
on-click	(event: MouseEvent) => void	-	按钮点击回调函数

Button Slots

Name	Description
default	按钮内容

TypeScript 类型

import type { ButtonProps, ButtonType, ButtonSize, ButtonNativeType } from '@plaud/ui-components';

// 按钮类型
type ButtonType = 'default' | 'primary' | 'success' | 'warning' | 'danger';

// 按钮尺寸
type ButtonSize = 'small' | 'medium' | 'large';

// 原生按钮类型
type ButtonNativeType = 'button' | 'submit' | 'reset';

// 按钮属性
interface ButtonProps {
  type?: ButtonType;
  size?: ButtonSize;
  nativeType?: ButtonNativeType;
  disabled?: boolean;
  loading?: boolean;
  round?: boolean;
  plain?: boolean;
  onClick?: (event: MouseEvent) => void;
}

TSX 用法

import { defineComponent } from 'vue';
import { Button } from '@plaud/ui-components';

export default defineComponent({
  setup() {
    const handleClick = () => {
      console.log('按钮被点击了！');
    };

    return () => (
      <div>
        <Button type="primary" onClick={handleClick}>
          主要按钮
        </Button>
        <Button type="success" size="large" round>
          成功按钮
        </Button>
        <Button type="danger" plain disabled>
          危险按钮
        </Button>
      </div>
    );
  },
});