Button 按钮

常用的操作按钮

基础用法

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

<template>
  <div class="container">
    <div>
      <Button>Default</Button>
      <Button type="primary">Primary</Button>
      <Button type="success">Success</Button>
      <Button type="info">Info</Button>
      <Button type="warning">Warning</Button>
      <Button type="danger">Danger</Button>
    </div>
    <div>
      <Button plain>Plain</Button>
      <Button plain type="primary">Primary</Button>
      <Button plain type="success">Success</Button>
      <Button plain type="info">Info</Button>
      <Button plain type="warning">Warning</Button>
      <Button plain type="danger">Danger</Button>
    </div>
    <div>
      <Button>Default</Button>
      <Button round type="primary">Primary</Button>
      <Button round type="success">Success</Button>
      <Button round type="info">Info</Button>
      <Button round type="warning">Warning</Button>
      <Button round type="danger">Danger</Button>
    </div>
  </div>
</template>
<script setup>
import { Button } from 'study-element';
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>

禁用状态

你可以使用 disabled 属性来定义按钮是否被禁用。

<template>
  <div class="container">
    <div>
      <Button disabled>Default</Button>
      <Button disabled type="primary">Primary</Button>
      <Button disabled type="success">Success</Button>
      <Button disabled type="info">Info</Button>
      <Button disabled type="warning">Warning</Button>
      <Button disabled type="danger">Danger</Button>
    </div>
    <div>
      <Button disabled plain>Plain</Button>
      <Button disabled plain type="primary">Primary</Button>
      <Button disabled plain type="success">Success</Button>
      <Button disabled plain type="info">Info</Button>
      <Button disabled plain type="warning">Warning</Button>
      <Button disabled plain type="danger">Danger</Button>
    </div>
  </div>
</template>
<script setup>
import { Button } from 'study-element';
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>

图标按钮

使用 icon 属性来为按钮添加图标。 图标名称见 Font Awesome 。

<template>
  <div class="container">
    <div>
      <Button icon="magnifying-glass">搜索</Button>
      <Button icon="pen-to-square" type="primary">编辑</Button>
      <Button icon="check" type="success">提交</Button>
      <Button icon="envelope" type="info">邮箱</Button>
      <Button icon="star" type="warning">标星</Button>
      <Button icon="trash-can" type="danger">删除</Button>
    </div>
  </div>
</template>
<script setup>
import { Button } from "study-element";
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>

加载状态按钮

通过设置 loading 属性来显示加载中状态。

<template>
  <div class="container">
    <div>
      <Button loading type="primary">Loading</Button>
    </div>
  </div>
</template>
<script setup>
import { Button } from "study-element";
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>

Button Attributes

Name	Description	Type	Default
size	按钮大小	enum - 'large'| 'small'	—
type	按钮类型	enum - '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 属性	enum - 'button'| 'submit'| 'reset'	button