Button 按钮

常用的操作按钮。

基础用法

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

<script setup>
import Button from '@/components/Button/Button.vue'
import Icon from '@/components/Icon/Icon.vue'
</script>
<template>
  <div class="basic block">
    <Button> hello </Button>
    <Button type="primary"> Primary </Button>
    <Button type="success"> Success </Button>
    <Button type="warning"> Warning </Button>
    <Button type="danger"> Danger </Button>
    <Button type="info"> Info </Button>
  </div>

  <div class="plain block">
    <Button plain> hello </Button>
    <Button type="primary" plain> Primary </Button>
    <Button type="success" plain> Success </Button>
    <Button type="warning" plain> Warning </Button>
    <Button type="danger" plain> Danger </Button>
    <Button type="info" plain> Info </Button>
  </div>

  <div class="round block">
    <Button round> hello </Button>
    <Button type="primary" round> Primary </Button>
    <Button type="success" round> Success </Button>
    <Button type="warning" round> Warning </Button>
    <Button type="danger" round> Danger </Button>
    <Button type="info" round> Info </Button>
  </div>

  <div class="circle block">
    <Button circle> <Icon icon="star" /> </Button>
    <Button type="primary" circle>   <Icon icon="star" /> </Button>
    <Button type="success" circle> <Icon icon="star" /> </Button>
    <Button type="warning" circle> <Icon icon="star" /> </Button>
    <Button type="danger" circle> <Icon icon="star" /> </Button>
    <Button type="info" circle> <Icon icon="star" /> </Button>
  </div>
</template>
<style>
.block {
  margin-bottom: 10px;
}
</style>

禁用状态

使用 disabled 属性来定义按钮是否被禁用

<script setup>
import Button from '@/components/Button/Button.vue'
</script>
<template>
  <div class="disabled block">
    <Button disabled> hello </Button>
    <Button type="primary" disabled> Primary </Button>
    <Button type="success" disabled> Success </Button>
    <Button type="warning" disabled> Warning </Button>
    <Button type="danger" disabled> Danger </Button>
    <Button type="info" disabled> Info </Button>
  </div>

  <div class="disabled-plain block">
    <Button plain disabled> hello </Button>
    <Button type="primary" disabled plain > Primary </Button>
    <Button type="success" plain disabled> Success </Button>
    <Button type="warning" plain disabled> Warning </Button>
    <Button type="danger" plain disabled> Danger </Button>
    <Button type="info" plain disabled> Info </Button>
  </div>
</template>

图标按钮

使用 icon 属性来为按钮添加图标。图标名称请看 fontawesome 官网 https://fontawesome.com/icons

<script setup>
import Button from '@/components/Button/Button.vue'
</script>
<template>
  <div class="icon block">
    <Button icon="star"> Star Button </Button>
  </div>
</template>>

加载状态按钮

通过设置 loading 属性为 true 来显示正在加载的状态。

<script setup>
import Button from '@/components/Button/Button.vue'
</script>
<template>
  <div class="loading block">
    <Button loading> Loading... </Button>
  </div>
</template>

不同大小的按钮

通过设置 size 属性为 small | large 来调整图标的大小。

<script setup>
import Button from '@/components/Button/Button.vue'
</script>
<template>
  <div class="size block">
    <Button size="large"> Large </Button>
    <Button type="primary"> 普通 </Button>
    <Button type="success" size="small"> Small </Button>
  </div>
</template>

React 用法

import { Button } from '@bobocn/element/react'
import '@bobocn/element/style.css'

// 基础用法
function App() {
  return (
    <div>
      <Button type="primary">主要按钮</Button>
      <Button type="success">成功按钮</Button>
      <Button type="warning">警告按钮</Button>
      <Button type="danger">危险按钮</Button>
      <Button type="info">信息按钮</Button>
    </div>
  )
}

// 禁用状态
<Button type="primary" disabled>禁用按钮</Button>

// 图标按钮
<Button type="primary" icon="search">搜索</Button>

// 加载状态
<Button type="primary" loading>加载中</Button>

API

属性 (Attributes)

属性名	说明	类型	默认值
size	按钮尺寸	'large' | 'small'	—
type	按钮类型	'primary' | 'success' | 'warning' | 'danger' | 'info'	—
plain	是否为朴素按钮	boolean	false
round	是否为圆角按钮	boolean	false
circle	是否为圆形按钮	boolean	false
loading	是否为加载中状态	boolean	false
disabled	是否禁用	boolean	false
icon	图标名称	string	—
autofocus	同原生 autofocus	boolean	false
native-type	同原生 type	'button' | 'submit' | 'reset'	button

事件 (Events)

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

插槽 (Slots)

插槽名	说明
default	按钮内容

方法 (Exposes)

方法名	说明	类型
ref	原生按钮元素引用	Ref<HTMLButtonElement>