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

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

Primary
Normal
Basic
Strong
Translucent
Text
<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 来使按钮处于加载状态,无法点击。

Primary
Normal
Basic
Strong
Translucent
Text
<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

属性

名称类型默认值描述
uistring=-

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

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

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

描述
button普通按钮。
submit提交按钮,点击会触发外部表单提交。
reset重置按钮,点击会触发外部表单重置为初始值。
loadingboolean=false是否处于加载状态。加载状态下按钮不响应用户交互。

插槽

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

事件

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

图标

名称描述
loading加载状态。