uiv

# Button 按钮

# 样例

使用任一类型快速创建带有样式的按钮。

<template>
  <div class="uiv">
    <btn>Default</btn>
    <btn type="primary">Primary</btn>
    <btn type="success">Success</btn>
    <btn type="info">Info</btn>
    <btn type="warning">Warning</btn>
    <btn type="danger">Danger</btn>
    <btn type="link">Link</btn>
  </div>
</template>

# 链接

带有 href 或 to 参数的按钮会使用链接标签进行渲染。

Native links

Default Primary

Vue Router links

Default Primary
<template>
  <div class="uiv">
    <h4>Native links</h4>
    <btn href="#">Default</btn>
    <btn href="#" type="primary">Primary</btn>
    <h4>Vue Router links</h4>
    <btn to="/">Default</btn>
    <btn to="/" type="primary">Primary</btn>
  </div>
</template>

# 尺寸

需要更大或者更小的按钮？通过 lg, sm, 或 xs 来渲染不同的尺寸。

<template>
  <div class="uiv">
    <p>
      <btn size="lg" type="primary">Large button</btn>
      <btn size="lg">Large button</btn>
    </p>
    <p>
      <btn type="primary">Default button</btn>
      <btn>Default button</btn>
    </p>
    <p>
      <btn size="sm" type="primary">Small button</btn>
      <btn size="sm">Small button</btn>
    </p>
    <p>
      <btn size="xs" type="primary">Extra small button</btn>
      <btn size="xs">Extra small button</btn>
    </p>
  </div>
</template>

通过添加 block 参数来创建块级按钮，它会占满父容器的宽度。

<template>
  <div class="uiv">
    <btn block size="lg" type="primary">Block level button</btn>
    <btn block size="lg">Block level button</btn>
  </div>
</template>

# 激活状态

添加 active 参数可以让按钮看起来像被按下了一样（更深色的背景以及边框，以及内嵌阴影）。

Buttons

Links

Primary button Button
<template>
  <div class="uiv">
    <h4>Buttons</h4>
    <btn active type="primary">Primary button</btn>
    <btn active>Button</btn>
    <h4>Links</h4>
    <btn active href="#" type="primary">Primary button</btn>
    <btn active to="/">Button</btn>
  </div>
</template>

# 禁用状态

添加 disabled 参数可以让按钮无法点击。

Buttons

Links

Primary button Button
<template>
  <div class="uiv">
    <h4>Buttons</h4>
    <btn disabled type="primary">Primary button</btn>
    <btn disabled>Button</btn>
    <h4>Links</h4>
    <btn disabled href="#" type="primary">Primary button</btn>
    <btn disabled to="/">Button</btn>
  </div>
</template>

# 多选、单选

添加 input-type 参数以将 <btn> 渲染为 checkbox 或 radio 输入。

提示

这需要与 btn-group 配合使用，以获得正确的样式。

# 多选样例


<template>
  <section class="uiv">
    <btn-group>
      <btn v-model="model" input-type="checkbox" input-value="1"
        >Checkbox 1</btn
      >
      <btn v-model="model" input-type="checkbox" input-value="2"
        >Checkbox 2</btn
      >
      <btn v-model="model" input-type="checkbox" input-value="3"
        >Checkbox 3</btn
      >
      <btn v-model="model" input-type="checkbox" input-value="4" disabled
        >Checkbox 4 (Disabled)</btn
      >
    </btn-group>
    <hr />
    <alert>Selected: {{ model }}</alert>
  </section>
</template>
<script>
export default {
  data() {
    return {
      model: ['1'],
    }
  },
}
</script>

# 单选样例


<template>
  <section class="uiv">
    <btn-group>
      <btn v-model="model" input-type="radio" input-value="1">Radio 1</btn>
      <btn v-model="model" input-type="radio" input-value="2">Radio 2</btn>
      <btn v-model="model" input-type="radio" input-value="3">Radio 3</btn>
      <btn v-model="model" input-type="radio" input-value="4" disabled
        >Radio 4 (Disabled)</btn
      >
    </btn-group>
    <hr />
    <alert>Selected: {{ model }}</alert>
  </section>
</template>
<script>
export default {
  data() {
    return {
      model: '1',
    }
  },
}
</script>

# API 文档

# Btn (opens new window)

# 参数

名字 类型 默认值 必填 描述
type String default Bootstrap 的按钮类型，支持的值： default, primary, info, success, warning, danger, link
native-type String button 原生按钮类型。 支持的值:button, submit, reset
size String 可选尺寸， 支持的值: lg, sm, xs
block Boolean false 块级样式
active Boolean false 激活状态
disabled Boolean false 禁用状态
href String 如果指定了该参数，将渲染为链接标签
target String 原生链接标签参数
to String or Object 如果指定了该参数，将渲染为 Vue-Router 链接标签
replace Boolean false Vue-Router 链接标签参数
append Boolean false Vue-Router 链接标签参数
exact Boolean false Vue-Router 链接标签参数
input-type String 如果指定了该参数，将渲染为单选或多选输入，支持的值: checkbox / radio
input-value 输入值
v-model 输入 model，注意在指定了 input-type 时，该参数是必填的
justified Boolean false 由于 Bootstrap 限制， 当在 <btn-group justified> 中使用 <btn> 时需要指定该参数，其余情况可以忽略

# 插槽

名字 描述
default 按钮体

# 事件

名字 参数 描述
click 点击事件

提示

使用 .native 修饰符来捕获浏览器原生事件，如 @click.native="..." ， @mouseover.native="..."，等等。

← ButtonGroup 按钮组 →