Button 按钮

示例

风格

可选的风格 ui 属性值：primary / strong / translucent / text / icon。

<template>
<article>
  <section>
    <veui-button ui="primary">
      Primary
    </veui-button>
    <veui-button>Normal</veui-button>
    <veui-button ui="basic">
      Basic
    </veui-button>
    <veui-button ui="strong">
      Strong
    </veui-button>
    <veui-button ui="translucent">
      Translucent
    </veui-button>
  </section>
  <section>
    <veui-button ui="text">
      Text
    </veui-button>
    <veui-button ui="icon">
      <veui-icon name="home"/>
    </veui-button>
    <veui-button ui="icon strong">
      <veui-icon name="home"/>
    </veui-button>
    <veui-button ui="icon aux">
      <veui-icon name="home"/>
    </veui-button>
    <veui-button ui="primary square">
      <veui-icon name="home"/>
    </veui-button>
  </section>
</article>
</template>

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

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

<style lang="less" scoped>
.veui-button {
  margin-right: 1em;
}

section {
  margin-top: 20px;
}
</style>

尺寸

可选的尺寸 ui 属性值：xs / s / m / l / xl。

在 GitHub 上编辑此页编辑

<template>
<article>
  <veui-button ui="xl">
    xl
  </veui-button>
  <veui-button ui="l">
    l
  </veui-button>
  <veui-button ui="m">
    m
  </veui-button>
  <veui-button ui="s">
    s
  </veui-button>
  <veui-button ui="xs">
    xs
  </veui-button>
</article>
</template>

<script>
import { Button } from 'veui'

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

<style lang="less" scoped>
.veui-button {
  margin-right: 1em;
}
</style>

禁用状态

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

Disabled

在 GitHub 上编辑此页编辑

<template>
<article>
  <section>
    <veui-checkbox v-model="disabled">
      Disabled
    </veui-checkbox>
  </section>
  <section>
    <veui-button
      ui="primary"
      :disabled="disabled"
    >
      Primary
    </veui-button>
    <veui-button :disabled="disabled">
      Normal
    </veui-button>
    <veui-button
      ui="basic"
      :disabled="disabled"
    >
      Basic
    </veui-button>
    <veui-button
      ui="strong"
      :disabled="disabled"
    >
      Strong
    </veui-button>
    <veui-button
      ui="translucent"
      :disabled="disabled"
    >
      Translucent
    </veui-button>
  </section>
  <section>
    <veui-button
      ui="text"
      :disabled="disabled"
    >
      Text
    </veui-button>
    <veui-button
      ui="icon"
      :disabled="disabled"
    >
      <veui-icon name="home"/>
    </veui-button>
    <veui-button
      ui="icon strong"
      :disabled="disabled"
    >
      <veui-icon name="home"/>
    </veui-button>
    <veui-button
      ui="icon aux"
      :disabled="disabled"
    >
      <veui-icon name="home"/>
    </veui-button>
    <veui-button
      ui="primary square"
      :disabled="disabled"
    >
      <veui-icon name="home"/>
    </veui-button>
  </section>
</article>
</template>

<script>
import { Button, Checkbox, Icon } from 'veui'
import 'veui-theme-dls-icons/home'

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

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}

.veui-button {
  margin-right: 1em;
}
</style>

加载状态

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

在 GitHub 上编辑此页编辑

<template>
<article>
  <section>
    <veui-checkbox v-model="loading">
      Loading
    </veui-checkbox>
  </section>
  <section>
    <veui-button
      ui="primary"
      :loading="loading"
    >
      Primary
    </veui-button>
    <veui-button :loading="loading">
      Normal
    </veui-button>
    <veui-button
      ui="basic"
      :loading="loading"
    >
      Basic
    </veui-button>
    <veui-button
      ui="strong"
      :loading="loading"
    >
      Strong
    </veui-button>
    <veui-button
      ui="translucent"
      :loading="loading"
    >
      Translucent
    </veui-button>
  </section>
  <section>
    <veui-button
      ui="text"
      :loading="loading"
    >
      Text
    </veui-button>
    <veui-button
      ui="icon"
      :loading="loading"
    >
      <veui-icon name="home"/>
    </veui-button>
    <veui-button
      ui="icon strong"
      :loading="loading"
    >
      <veui-icon name="home"/>
    </veui-button>
    <veui-button
      ui="icon aux"
      :loading="loading"
    >
      <veui-icon name="home"/>
    </veui-button>
    <veui-button
      ui="primary square"
      :loading="loading"
    >
      <veui-icon name="home"/>
    </veui-button>
  </section>
</article>
</template>

<script>
import { Button, Checkbox, Icon } from 'veui'
import 'veui-theme-dls-icons/home'

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

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}

.veui-button {
  margin-right: 1em;
}
</style>

API

属性

名称类型默认值描述

ui

string=

预设样式。为空格分隔的一组枚举值的组合。

值	描述
`normal`	普通按钮，为默认样式。
`primary`	主要按钮，背景显示为主题色。
`basic`	基础按钮。
`strong`	加强样式。可单独使用，也可配合 `text` / `icon` 样式使用。
`translucent`	半透明样式，用于深色背景。
`text`	纯文字样式，没有背景色及边框。
`icon`	纯图标样式，没有背景色及边框。
`aux`	辅助按钮，用于配合 `text` / `icon` 样式使用。
`square`	方形按钮。可配合其它样式一同使用。
`xs`	超小尺寸样式。
`s`	小尺寸样式。
`m`	中尺寸样式。
`l`	大尺寸样式。
`xl`	超大尺寸样式。

disabled boolean= false 是否为禁用状态。

type

string=

'button'

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

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

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

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

插槽

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

事件

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

图标

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

在 GitHub 上编辑此页编辑