VEUI

VEUI on GitHub
Play!EnglishEN
⌘ K | 全文搜索…

Button 按钮

示例

风格

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

在 GitHub 上编辑此示例编辑
<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="ghost">
      Ghost
    </veui-button>
    <veui-button ui="ghost strong">
      Strong Ghost
    </veui-button>
    <veui-button ui="ghost aux">
      Aux Ghost
    </veui-button>
    <div class="reverse">
      <veui-button ui="ghost reverse">
        Reverse Ghost
      </veui-button>
    </div>
  </section>
  <section>
    <veui-button ui="text">
      Text
    </veui-button>
    <veui-button ui="text strong">
      Text
    </veui-button>
    <veui-button ui="text aux">
      Text
    </veui-button>
    <veui-button ui="text subtle">
      Text
    </veui-button>
  </section>
  <section>
    <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="icon subtle">
      <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>
section {
  display: flex;
  gap: 12px;

  & + & {
    margin-top: 20px;
  }
}

.reverse {
  margin: -8px;
  padding: 8px;
  border-radius: 4px;
  background-color: #0052cc;
}
</style>

尺寸

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

在 GitHub 上编辑此示例编辑
<template>
<article>
  <veui-button
    class="button"
    ui="xl"
  >
    xl
  </veui-button>
  <veui-button
    class="button"
    ui="l"
  >
    l
  </veui-button>
  <veui-button
    class="button"
    ui="m"
  >
    m
  </veui-button>
  <veui-button
    class="button"
    ui="s"
  >
    s
  </veui-button>
  <veui-button
    class="button"
    ui="xs"
  >
    xs
  </veui-button>
</article>
</template>

<script>
import { Button } from 'veui'

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

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

禁用状态

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

在 GitHub 上编辑此示例编辑
<template>
<article>
  <section>
    <veui-checkbox v-model="disabled">
      Disabled
    </veui-checkbox>
  </section>
  <section>
    <veui-button
      class="button"
      ui="primary"
      :disabled="disabled"
    >
      Primary
    </veui-button>
    <veui-button
      class="button"
      :disabled="disabled"
    >
      Normal
    </veui-button>
    <veui-button
      class="button"
      ui="basic"
      :disabled="disabled"
    >
      Basic
    </veui-button>
    <veui-button
      class="button"
      ui="strong"
      :disabled="disabled"
    >
      Strong
    </veui-button>
    <veui-button
      class="button"
      ui="translucent"
      :disabled="disabled"
    >
      Translucent
    </veui-button>
  </section>
  <section>
    <veui-button
      class="button"
      ui="text"
      :disabled="disabled"
    >
      Text
    </veui-button>
    <veui-button
      class="button"
      ui="icon"
      :disabled="disabled"
    >
      <veui-icon name="home"/>
    </veui-button>
    <veui-button
      class="button"
      ui="icon strong"
      :disabled="disabled"
    >
      <veui-icon name="home"/>
    </veui-button>
    <veui-button
      class="button"
      ui="icon aux"
      :disabled="disabled"
    >
      <veui-icon name="home"/>
    </veui-button>
    <veui-button
      class="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;
}

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

加载状态

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

在 GitHub 上编辑此示例编辑
<template>
<article>
  <section>
    <veui-checkbox v-model="loading">
      Loading
    </veui-checkbox>
  </section>
  <section>
    <veui-button
      class="button"
      ui="primary"
      :loading="loading"
    >
      Primary
    </veui-button>
    <veui-button
      class="button"
      :loading="loading"
    >
      Normal
    </veui-button>
    <veui-button
      class="button"
      ui="basic"
      :loading="loading"
    >
      Basic
    </veui-button>
    <veui-button
      class="button"
      ui="strong"
      :loading="loading"
    >
      Strong
    </veui-button>
    <veui-button
      class="button"
      ui="translucent"
      :loading="loading"
    >
      Translucent
    </veui-button>
  </section>
  <section>
    <veui-button
      class="button"
      ui="text"
      :loading="loading"
    >
      Text
    </veui-button>
    <veui-button
      class="button"
      ui="icon"
      :loading="loading"
    >
      <veui-icon name="home"/>
    </veui-button>
    <veui-button
      class="button"
      ui="icon strong"
      :loading="loading"
    >
      <veui-icon name="home"/>
    </veui-button>
    <veui-button
      class="button"
      ui="icon aux"
      :loading="loading"
    >
      <veui-icon name="home"/>
    </veui-button>
    <veui-button
      class="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;
}

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

API

属性

名称类型默认值描述
uistring-

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

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

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

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

插槽

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

事件

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

图标

名称描述
loading加载状态提示，默认显示加载图标动效。
在 GitHub 上编辑此页面编辑
© Baidu, Inc. 2024