Button 按钮

常用的操作按钮

基础用法

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

<template>
  <div class="basic block">
    <vk-button>hello</vk-button>
    <vk-button type="primary">Primary</vk-button>
    <vk-button type="success">Success</vk-button>
    <vk-button type="warning">Warning</vk-button>
    <vk-button type="danger">Danger</vk-button>
    <vk-button type="info">Info</vk-button>
  </div>

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

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

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

禁用状态

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

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

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

图标按钮

使用 icon 属性来为按钮添加图标。图标名称请看 fontawesome 官网 https://fontawesome.com/search?o=r&m=free&s=solid

<template>
  <div class="icon">
    <vk-button type="primary" icon="pen-to-square" />
    <vk-button type="primary" icon="share-nodes" />
    <vk-button type="primary" icon="trash-can" />
    <vk-button type="primary" icon="search">Search</vk-button>
    <vk-button type="primary">
      Upload <vk-icon icon="upload" />
    </vk-button>
  </div>
</template>

加载状态按钮

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

<template>
  <div class="loading">
    <vk-button type="primary" loading> Loading... </vk-button>
  </div>
</template>

调整尺寸

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

<template>
  <div class="size block">
    <vk-button size="large">Large</vk-button>
    <vk-button>Default</vk-button>
    <vk-button size="small">Small</vk-button>
    <vk-button size="large" icon="search">Search</vk-button>
    <vk-button icon="search">Search</vk-button>
    <vk-button size="small" icon="search">Search</vk-button>
  </div>
  <div class="size block">
    <vk-button size="large" round>Large</vk-button>
    <vk-button round>Default</vk-button>
    <vk-button size="small" round>Small</vk-button>
    <vk-button size="large" icon="search" round>Search</vk-button>
    <vk-button icon="search" round>Search</vk-button>
    <vk-button size="small" icon="search" round>Search</vk-button>
  </div>
  <div class="size">
    <vk-button icon="search" size="large" circle />
    <vk-button icon="search" circle />
    <vk-button icon="search" size="small" circle />
  </div>
</template>

Button API

属性

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

插槽

插槽名	说明
default	自定义默认内容

实例

名称	说明	类型
ref	按钮 html 元素	`Ref<HTMLButtonElement>`

Button 按钮 ​

基础用法 ​

禁用状态 ​

图标按钮 ​

加载状态按钮 ​

调整尺寸 ​

Button API ​

属性 ​

插槽 ​

实例 ​