Button 按钮

常用的操作按钮。

基础用法

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

<script setup>
import PfButton from '@/components/lib/Button/src/Button.vue'
</script>
<template>
  <div class="mb-4">
    <pf-button>Default</pf-button>
    <pf-button type="primary">Primary</pf-button>
    <pf-button type="success">Success</pf-button>
    <pf-button type="info">Info</pf-button>
    <pf-button type="warning">Warning</pf-button>
    <pf-button type="danger">Danger</pf-button>
  </div>

  <div class="mb-4">
    <pf-button plain>Plain</pf-button>
    <pf-button type="primary" plain>Primary</pf-button>
    <pf-button type="success" plain>Success</pf-button>
    <pf-button type="info" plain>Info</pf-button>
    <pf-button type="warning" plain>Warning</pf-button>
    <pf-button type="danger" plain>Danger</pf-button>
  </div>

  <div class="mb-4">
    <pf-button round>Round</pf-button>
    <pf-button type="primary" round>Primary</pf-button>
    <pf-button type="success" round>Success</pf-button>
    <pf-button type="info" round>Info</pf-button>
    <pf-button type="warning" round>Warning</pf-button>
    <pf-button type="danger" round>Danger</pf-button>
  </div>

  <div class="mb-4">
    <pf-button icon="magnifying-glass" circle />
    <pf-button type="primary" icon="pen-to-square" circle />
    <pf-button type="success" icon="check" circle />
    <pf-button type="info" icon="envelope" circle />
    <pf-button type="warning" icon="star" circle />
    <pf-button type="danger" icon="trash-can" circle />
  </div>
</template>

禁用状态

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

<script setup>
import PfButton from '@/components/lib/Button/src/Button.vue'
</script>
<template>
  <div class="mb-4">
    <pf-button disabled>Default</pf-button>
    <pf-button type="primary" disabled>Primary</pf-button>
    <pf-button type="success" disabled>Success</pf-button>
    <pf-button type="info" disabled>Info</pf-button>
    <pf-button type="warning" disabled>Warning</pf-button>
    <pf-button type="danger" disabled>Danger</pf-button>
  </div>

  <div>
    <pf-button plain disabled>Plain</pf-button>
    <pf-button type="primary" plain disabled>Primary</pf-button>
    <pf-button type="success" plain disabled>Success</pf-button>
    <pf-button type="info" plain disabled>Info</pf-button>
    <pf-button type="warning" plain disabled>Warning</pf-button>
    <pf-button type="danger" plain disabled>Danger</pf-button>
  </div>
</template>

图标按钮

使用图标为按钮添加更多的含义。使用 icon 属性来为按钮添加图标。

<script setup>
import PfButton from '@/components/lib/Button/src/Button.vue'
</script>
<template>
  <div>
    <pf-button type="primary" icon="pen-to-square" />
    <pf-button type="primary" icon="share-nodes" />
    <pf-button type="primary" icon="trash-can" />
    <pf-button type="primary" icon="magnifying-glass">Search</pf-button>
    <pf-button type="primary" icon="arrow-up-from-bracket">Upload</pf-button>
  </div>
</template>

加载状态按钮

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

<script setup>
import PfButton from '@/components/lib/Button/src/Button.vue'
</script>
<template>
  <div>
    <pf-button type="primary" loading>Loading</pf-button>
  </div>
</template>

调整尺寸

使用 size 属性额外配置尺寸，可使用 large和small两种值。

<script setup>
import PfButton from '@/components/lib/Button/src/Button.vue'
</script>
<template>
  <div class="flex flex-wrap items-center mb-4">
    <pf-button size="large">Large</pf-button>
    <pf-button>Default</pf-button>
    <pf-button size="small">Small</pf-button>
    <pf-button size="large" icon="magnifying-glass">Search</pf-button>
    <pf-button icon="magnifying-glass">Search</pf-button>
    <pf-button size="small" icon="magnifying-glass">Search</pf-button>
  </div>
  <div class="flex flex-wrap items-center mb-4">
    <pf-button size="large" round>Large</pf-button>
    <pf-button round>Default</pf-button>
    <pf-button size="small" round>Small</pf-button>
    <pf-button size="large" icon="magnifying-glass" round>Search</pf-button>
    <pf-button icon="magnifying-glass" round>Search</pf-button>
    <pf-button size="small" icon="magnifying-glass" round>Search</pf-button>
  </div>
  <div class="flex flex-wrap items-center">
    <pf-button icon="magnifying-glass" size="large" circle />
    <pf-button icon="magnifying-glass" circle />
    <pf-button icon="magnifying-glass" size="small" circle />
  </div>
</template>

Button 属性

Name	Description	Type	Default
size	button size	enum - 'large'| 'small'	—
type	button type	enum - 'primary'| 'success'| 'warning'| 'danger'| 'info'	—
plain	determine whether it's a plain button	boolean	false
round	determine whether it's a round button	boolean	false
circle	determine whether it's a circle button	boolean	false
loading	determine whether it's loading	boolean	false
disabled	disable the button	boolean	false
icon	icon component	string	—
autofocus	same as native button's autofocus	boolean	false
native-type	same as native button's type	enum - 'button'| 'submit'| 'reset'	button