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 来使按钮处于禁用状态。

<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

属性

名称类型默认值描述
uistring-

预设样式。

描述
primary主要按钮,背景显示为主题色。
alt备选样式。
dark深色样式。
link链接样式,没有背景色及边框。
large大尺寸样式。
small小尺寸样式。
tiny特小尺寸样式。
micro微型样式。
round圆形样式。
square正方形样式。
disabledbooleanfalse是否为禁用状态。
typestring'button'

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

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

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

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

插槽

名称描述
default按钮上显示的内容。
loading

加载状态下按钮的内容。默认增加一个加载中的图标。

事件

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

图标

名称描述
loading加载状态。