Button 按钮

示例

风格

可选的风格 ui 属性值：primary/alt/dark/link。

<template>
<article>
  <veui-button ui="primary">
    Primary
  </veui-button>
  <veui-button>Normal</veui-button>
  <veui-button ui="alt">
    Alternate
  </veui-button>
  <veui-button ui="link">
    Link
  </veui-button>
</article>
</template>

<script>
import { Button } from 'veui'

export default {
  components: {
    'veui-button': Button
  }
}
</script>

尺寸

可选的尺寸 ui 属性值：large/small/tiny/micro。

<template>
<article>
  <veui-button ui="large">
    Large
  </veui-button>
  <veui-button>Normal</veui-button>
  <veui-button ui="small">
    Small
  </veui-button>
  <veui-button ui="tiny">
    Tiny
  </veui-button>
  <veui-button ui="micro">
    Micro
  </veui-button>
</article>
</template>

<script>
import { Button } from 'veui'

export default {
  components: {
    'veui-button': Button
  }
}
</script>

形状

可选的形状 ui 属性值：square/round。建议搭配图标使用。

<template>
<article>
  <veui-button ui="square">
    👍
  </veui-button>
  <veui-button ui="round">
    <veui-icon name="edit"/>
  </veui-button>
</article>
</template>

<script>
import { Button, Icon } from 'veui'
import 'veui-theme-one/icons/edit'

export default {
  components: {
    'veui-button': Button,
    'veui-icon': Icon
  }
}
</script>

禁用状态

设置 disabled 来使按钮处于禁用状态。

Disabled

<template>
<article>
  <section>
    <veui-checkbox v-model="disabled">
      Disabled
    </veui-checkbox>
  </section>
  <section>
    <veui-button
      :disabled="disabled"
      ui="primary"
    >
      Primary
    </veui-button>
    <veui-button :disabled="disabled">
      Normal
    </veui-button>
    <veui-button
      :disabled="disabled"
      ui="alt"
    >
      Alternate
    </veui-button>
    <veui-button
      :disabled="disabled"
      ui="link"
    >
      Link
    </veui-button>
  </section>
</article>
</template>

<script>
import { Button, Checkbox } from 'veui'

export default {
  components: {
    'veui-button': Button,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      disabled: true
    }
  }
}
</script>

加载状态

设置 loading 来使按钮处于加载状态，无法点击。

可以覆盖名为 loading 的 slot 来覆盖加载状态下按钮的图标及文字。

<template>
<article>
  <veui-button
    loading
    ui="primary"
  >
    Primary
  </veui-button>
  <veui-button loading>
    Normal
  </veui-button>
  <veui-button
    loading
    ui="alt"
  >
    Alternate
  </veui-button>
  <veui-button
    loading
    ui="link"
  >
    Link
  </veui-button>
  <veui-button
    loading
    ui="primary"
  >
    Normal
    <template slot="loading">
      <veui-icon
        name="spinner"
        spin
      />
      <span class="veui-button-loading-text">Submitting...</span>
    </template>
  </veui-button>
</article>
</template>

<script>
import { Button, Icon } from 'veui'
import 'veui-theme-one-icons/spinner'

export default {
  components: {
    'veui-button': Button,
    'veui-icon': Icon
  }
}
</script>

API

属性

名称类型默认值描述

ui

string

预设样式。

值	描述
`primary`	主要按钮，背景显示为主题色。
`alt`	备选样式。
`dark`	深色样式。
`link`	链接样式，没有背景色及边框。
`large`	大尺寸样式。
`small`	小尺寸样式。
`tiny`	特小尺寸样式。
`micro`	微型样式。
`round`	圆形样式。
`square`	正方形样式。

disabled boolean false 是否为禁用状态。

type

string

'button'

按钮类型。参见原生 <button> 元素的 type。

值	描述
`button`	普通按钮。
`submit`	提交按钮，点击会触发外部表单提交。
`reset`	重置按钮，点击会触发外部表单重置为初始值。

注意，默认值与原生 <button> 元素不同。需要触发表单提交时请显式设置为 submit。

loading boolean false 是否处于加载状态。加载状态下按钮不响应用户交互。

插槽

名称	描述
`default`	按钮上显示的内容。
`loading`	加载状态下按钮的内容。默认增加一个加载中的图标。

事件

Button 组件支持所有原生 <button> 元素支持的原生事件，回调函数的参数均为相应的原生事件对象。

图标

名称	描述
`loading`	加载状态。