Button 按钮

常用的操作按钮。

基础用法

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

<template>
  <p>
    <er-button>Default</er-button>
    <er-button type="primary">Primary</er-button>
    <er-button type="success">Success</er-button>
    <er-button type="info">Info</er-button>
    <er-button type="warning">Warning</er-button>
    <er-button type="danger">Danger</er-button>
  </p>

  <p>
    <er-button plain>Plain</er-button>
    <er-button type="primary" plain>Primary</er-button>
    <er-button type="success" plain>Success</er-button>
    <er-button type="info" plain>Info</er-button>
    <er-button type="warning" plain>Warning</er-button>
    <er-button type="danger" plain>Danger</er-button>
  </p>

  <p>
    <er-button round>Round</er-button>
    <er-button type="primary" round>Primary</er-button>
    <er-button type="success" round>Success</er-button>
    <er-button type="info" round>Info</er-button>
    <er-button type="warning" round>Warning</er-button>
    <er-button type="danger" round>Danger</er-button>
  </p>

  <p>
    <er-button icon="search" circle />
    <er-button type="primary" icon="edit" circle />
    <er-button type="success" icon="check" circle />
    <er-button type="info" icon="message" circle />
    <er-button type="warning" icon="star" circle />
    <er-button type="danger" icon="trash" circle />
  </p>
</template>

禁用状态

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

<template>
  <p>
    <er-button>Default</er-button>
    <er-button type="primary">Primary</er-button>
    <er-button type="success">Success</er-button>
    <er-button type="info">Info</er-button>
    <er-button type="warning">Warning</er-button>
    <er-button type="danger">Danger</er-button>
  </p>
  <p>
    <er-button disabled>Default</er-button>
    <er-button type="primary" disabled>Primary</er-button>
    <er-button type="success" disabled>Success</er-button>
    <er-button type="info" disabled>Info</er-button>
    <er-button type="warning" disabled>Warning</er-button>
    <er-button type="danger" disabled>Danger</er-button>
  </p>
</template>

图标按钮

使用 icon属性来定义按钮的图标。

<template>
  <div>
    <er-button type="primary" icon="edit" />
    <er-button type="primary" icon="share" />
    <er-button type="primary" icon="trash" />
    <er-button type="primary" icon="search">Search</er-button>
    <er-button type="primary">
      Upload<er-icon icon="upload" style="margin-left: 8px" />
    </er-button>
  </div>
</template>

按钮组

使用 <er-button-group> 对多个按钮分组。

<template>
  <p>
    <er-button-group disabled>
      <er-button type="primary" icon="arrow-left">Previous Page</er-button>
      <er-button type="primary">
        Next Page<er-icon icon="arrow-right" style="margin-left: 8px" />
      </er-button>
    </er-button-group>
  </p>
  <p>
    <er-button-group type="warning" size="small">
      <er-button type="primary" icon="edit" round />
      <er-button type="primary" icon="share" />
      <er-button type="primary" icon="trash" round />
    </er-button-group>
  </p>
</template>

加载状态

使用 loading属性来定义按钮的加载状态。

TIP

您可以使用 loading 插槽或 loadingIcon 属性自定义您的 loading 图标

ps: loading 插槽优先级高于 loadingIcon 属性

<template>
  <div>
    <er-button type="primary" loading>Loading</er-button>
    <er-button type="primary" loading-icon="circle-notch" loading
      >Loading</er-button
    >
    <er-button type="primary" loading>
      <template #loading>
        <er-icon style="margin-right: 6px" icon="star" spin />
      </template>
      Loading
    </er-button>
  </div>
</template>

按钮尺寸

使用 size属性来定义按钮的尺寸。

<template>
  <p>
    <er-button size="large">Large</er-button>
    <er-button>Default</er-button>
    <er-button size="small">Small</er-button>
    <er-button size="large" icon="search">Search</er-button>
    <er-button icon="search">Search</er-button>
    <er-button size="small" icon="search">Search</er-button>
  </p>
  <p>
    <er-button size="large" round>Large</er-button>
    <er-button round>Default</er-button>
    <er-button size="small" round>Small</er-button>
    <er-button size="large" icon="search" round>Search</er-button>
    <er-button icon="search" round>Search</er-button>
    <er-button size="small" icon="search" round>Search</er-button>
  </p>
  <p>
    <er-button size="large" icon="search" circle />
    <er-button icon="search" circle />
    <er-button size="small" icon="search" circle />
  </p>
</template>

Tag

可以自定义元素标签。例如，按钮，div，路由链接，nuxt 链接。

<template>
  <er-button>button</er-button>
  <er-button tag="div" role="button" tabindex="0">div</er-button>
  <er-button
    type="primary"
    tag="a"
    href="https://github.com/EricWXY/eric-ui"
    target="_blank"
    rel="noopener noreferrer"
  >
    a
  </er-button>
</template>

节流模式

可以通过 useThrottle 属性来定义按钮是否使用节流模式默认为 true。

<script setup>
import { ErMessage } from "eric-ui";
function handleBtnClick() {
  ErMessage.info("btn click");
}
</script>

<template>
  <p>
    <er-button @click="handleBtnClick"> with throttle</er-button>
    <er-button :use-throttle="false" @click="handleBtnClick"
      >without throttle</er-button
    >
  </p>
</template>

Button API

Props

Name	Description	Type	Default
size	尺寸	`enum` - `'large'\| 'default'\| 'small'`	—
type	类型	`enum` - `'primary'\| 'success'\| 'warning'\| 'danger'\| 'info'`	info
plain	是否为朴素按钮	`boolean`	false
round	是否为圆角按钮	`boolean`	false
circle	是否为圆形按钮	`boolean`	false
loading	是否为加载中状态	`boolean`	false
loading-icon	自定义加载中状态图标组件	`string`	spinner
disabled	按钮是否为禁用状态	`boolean`	false
icon	按钮图标	`string`	-
autofocus	是否自动聚焦(原生`autofocus`属性)	`boolean`	false
native-type	原生 type 属性	`enum` - `'button'\| 'submit'\| 'reset'`	button
tag	自定义元素标签	`string`/`Component`	button
use-throttle	是否使用节流模式	`boolean`	true
throttle-duration	节流模式下，节流时间间隔(ms)	`number`	500

Events

Name	Description	Type
click	按钮点击事件	`(event: MouseEvent)=> void`

Slots

Name	Description
default	默认插槽, 按钮内容
loading	自定义加载图标

Expose

Name	Description	Type
ref	按钮 html 元素	`Ref<HTMLButtonElement>`
size	按钮尺寸	`ComputedRef<''\|'small' \|'large'>`
type	按钮类型	`ComputedRef<''\|'primary' \|...>`
disabled	按钮禁用状态	`ComputedRef<boolean>`

ButtonGroup API

Props

Name	Description	Type	Default
size	尺寸	`enum` - `'large'\| 'default'\| 'small'`	—
type	类型	`enum` - `'primary'\| 'success'\| 'warning'\| 'danger'\| 'info'`	info
disabled	按钮组是否为禁用状态	`boolean`	false

Slots

Name	Description	Sub Component
default	默认插槽	Button

Button 按钮 ​

基础用法 ​

禁用状态 ​

图标按钮 ​

按钮组 ​

加载状态 ​

按钮尺寸 ​

Tag ​

节流模式 ​

Button API ​

Props ​

Events ​

Slots ​

Expose ​

ButtonGroup API ​

Props ​

Slots ​

Button 按钮

基础用法

禁用状态

图标按钮

按钮组

加载状态

按钮尺寸

Tag

节流模式

Button API

Props

Events

Slots

Expose

ButtonGroup API

Props

Slots