报告问题编辑此页面

表单单选按钮

为了跨浏览器的一致性，<b-form-radio-group> 和 <b-form-radio> 使用 Bootstrap 的自定义单选按钮输入来替换浏览器的默认单选按钮输入。它建立在语义和可访问的标记之上，因此它是默认单选按钮输入的可靠替代品。

单个单选按钮

<template>
  <div>
    <b-form-group label="Individual radios" v-slot="{ ariaDescribedby }">
      <b-form-radio v-model="selected" :aria-describedby="ariaDescribedby" name="some-radios" value="A">Option A</b-form-radio>
      <b-form-radio v-model="selected" :aria-describedby="ariaDescribedby" name="some-radios" value="B">Option B</b-form-radio>
    </b-form-group>

    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: ''
      }
    }
  }
</script>

<!-- b-form-radio.vue -->

分组单选按钮

<b-form-radio-group> 中的单个单选按钮输入可以通过 options 属性或通过手动放置 <b-form-radio> 子组件来指定。在 <b-form-radio-group> 中使用手动放置的 <b-form-radio> 组件时，它们将继承大多数属性和 <b-form-radio-group> 的 v-model。

<template>
  <div>
    <b-form-group label="Radios using options" v-slot="{ ariaDescribedby }">
      <b-form-radio-group
        id="radio-group-1"
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="radio-options"
      ></b-form-radio-group>
    </b-form-group>

    <b-form-group label="Radios using sub-components" v-slot="{ ariaDescribedby }">
      <b-form-radio-group
        id="radio-group-2"
        v-model="selected"
        :aria-describedby="ariaDescribedby"
        name="radio-sub-component"
      >
        <b-form-radio value="first">Toggle this custom radio</b-form-radio>
        <b-form-radio value="second">Or toggle this other custom radio</b-form-radio>
        <b-form-radio value="third" disabled>This one is Disabled</b-form-radio>
        <b-form-radio :value="{ fourth: 4 }">This is the 4th radio</b-form-radio>
      </b-form-radio-group>
    </b-form-group>

    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: 'first',
        options: [
          { text: 'Toggle this custom radio', value: 'first' },
          { text: 'Or toggle this other custom radio', value: 'second' },
          { text: 'This one is Disabled', value: 'third', disabled: true },
          { text: 'This is the 4th radio', value: { fourth: 4 } }
        ]
      }
    }
  }
</script>

<!-- b-form-radio-group.vue -->

随意混合和匹配 options 属性和 <b-form-radio> 在 <b-form-radio-group> 中。手动放置的 <b-form-radio> 输入将显示在由 options 属性生成的任何单选按钮输入下方。要让它们显示在由 options 生成的输入上方，请将它们放在名为 first 的命名槽中。

<template>
  <div>
    <b-form-group label="Radios using options and slots" v-slot="{ ariaDescribedby }">
      <b-form-radio-group
        id="radio-slots"
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="radio-options-slots"
      >
        <!-- Radios in this slot will appear first -->
        <template #first>
          <b-form-radio value="first">Toggle this custom radio from slot first</b-form-radio>
        </template>

        <!-- Radios in the default slot will appear after any option generated radios -->
        <b-form-radio :value="{ fourth: 4 }">This is the 4th radio</b-form-radio>
        <b-form-radio value="fifth">This is the 5th radio</b-form-radio>
      </b-form-radio-group>
    </b-form-group>

    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: '',
        options: [
          { text: 'Or toggle this other custom radio', value: 'second' },
          { text: 'Third radio', value: 'third' }
        ]
      }
    }
  }
</script>

<!-- b-form-radio-group-slot.vue -->

单选按钮组选项数组

options 可以是字符串或对象的数组。可用字段

  • value 将在 v-model 上设置的选择值
  • disabled 禁用选择项
  • text 显示文本，或 html 显示基本内联 html

value 可以是字符串、数字或简单对象。避免在值中使用复杂类型。

如果同时提供了 html 和 text，html 将优先。仅在 html 字段中支持基本/原生 HTML（组件不起作用）。请注意，并非所有浏览器都会在 <select> 的 <option> 元素中呈现内联 html（即 <i>、<strong> 等）。

请谨慎将用户提供的内容放置在 html 字段中，因为它可能会使您容易受到 XSS 攻击 的攻击，如果您没有首先 清理 用户提供的字符串。 

const options = ['A', 'B', 'C', { text: 'D', value: { d: 1 }, disabled: true }, 'E', 'F']

如果数组项为字符串，它将同时用于生成的 value 和 text 字段。

您可以在数组中混合使用字符串和 对象。

在内部，BootstrapVue 将把上述数组转换为以下数组（对象数组）格式

const options = [
  { text: 'A', value: 'A', disabled: false },
  { text: 'B', value: 'B', disabled: false },
  { text: 'C', value: 'C', disabled: false },
  { text: 'D', value: { d: 1 }, disabled: true },
  { text: 'E', value: 'E', disabled: false },
  { text: 'F', value: 'F', disabled: false }
]

作为对象数组的选项

const options = [
  { text: 'Item 1', value: 'first' },
  { text: 'Item 2', value: 'second' },
  { html: '<b>Item</b> 3', value: 'third', disabled: true },
  { text: 'Item 4' },
  { text: 'Item 5', value: { foo: 'bar', baz: true } }
]

如果 value 缺失，则 text 将同时用作 value 和 text 字段。如果您使用 html 属性，您必须提供 value 属性。

在内部，BootstrapVue 将把上述数组转换为以下数组（对象数组）格式

const options = [
  { text: 'Item 1', value: 'first', disabled: false },
  { text: 'Item 2', value: 'second', disabled: false },
  { html: '<b>Item</b> 3', value: 'third', disabled: true },
  { text: 'Item 4', value: 'Item 4', disabled: false },
  { text: 'Item 5', value: 'E', disabled: false }
]

更改选项字段名称

如果你想自定义字段属性名称（例如使用 name 字段显示 text），你可以通过设置 text-field、html-field、value-field 和 disabled-field 属性为包含你希望使用的属性名称的字符串来轻松更改它们

<template>
  <div>
    <b-form-radio-group
      v-model="selected"
      :options="options"
      class="mb-3"
      value-field="item"
      text-field="name"
      disabled-field="notEnabled"
    ></b-form-radio-group>
    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: 'A',
        options: [
          { item: 'A', name: 'Option A' },
          { item: 'B', name: 'Option B' },
          { item: 'D', name: 'Option C', notEnabled: true },
          { item: { d: 1 }, name: 'Option D' }
        ]
      }
    }
  }
</script>

<!-- b-form-radio-group-options-fields.vue -->

单选按钮值和 v-model

<b-form-radio> 组件默认没有值。你必须通过 <b-form-radio> 上的 value 属性明确提供一个值。当单选按钮被选中时，此值将发送到 v-model。

<b-form-radio> 和 <b-form-radio-group> 的 v-model 绑定到 checked 属性。要预先选中一个单选按钮，你必须将 v-model 值设置为单选按钮的值之一（即必须与单选按钮的 value 属性之一指定的值匹配）。不要直接使用 checked 属性。单选按钮组中的每个单选按钮必须具有唯一值。

单选按钮支持多种类型的值，例如 string、boolean、number 或普通 object。

内联或堆叠单选按钮

默认情况下，<b-form-radio-group> 生成内联单选框输入，而 <b-form-radio> 生成堆叠单选框。在 <b-form-radio-group> 上设置 stacked 属性，使单选框彼此重叠出现，或在不使用组中的单选框时，在 b-form-radio 上设置 inline 属性为 true，使它们内联呈现。

<template>
  <div>
    <b-form-group label="Inline radios (default)" v-slot="{ ariaDescribedby }">
      <b-form-radio-group
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="radio-inline"
      ></b-form-radio-group>
    </b-form-group>

    <b-form-group label="Stacked radios" v-slot="{ ariaDescribedby }">
      <b-form-radio-group
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="radios-stacked"
        stacked
      ></b-form-radio-group>
    </b-form-group>

    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: 'first',
        options: [
          { text: 'First radio', value: 'first' },
          { text: 'Second radio', value: 'second' },
          { text: 'Third radio', value: 'third' }
        ]
      }
    }
  }
</script>

<!-- b-form-radio-stacked.vue -->

控件大小

使用 size 属性控制单选框的大小。默认大小为中等。支持的大小值为 sm（小）和 lg（大）。

<div>
  <b-form-radio name="radio-size" size="sm">Small</b-form-radio>
  <b-form-radio name="radio-size">Default</b-form-radio>
  <b-form-radio name="radio-size" size="lg">Large</b-form-radio>
</div>

<!-- form-radio-sizes.vue -->

大小可以设置在各个 <b-form-radio> 组件上，或从 <b-form-radio-group> 的 size 设置中继承。

注意：Bootstrap v4.x 本身不支持自定义单选框控件的大小。但是，BootstrapVue 包含了自定义 SCSS/CSS，为自定义单选框的大小调整添加了支持。

按钮样式单选框

通过在 <b-form-radio-group> 上将 buttons 属性设置为 true，以按钮的外观呈现单选框。通过将 button-variant 属性设置为标准 Bootstrap 按钮变体之一（有关支持的变体，请参见 <b-button>），设置按钮变体。默认的 button-variant 为 secondary。

buttons 属性优先于 plain，如果未设置 buttons，则 button-variant 无效。

按钮样式单选框在选中状态时，其标签会自动应用类 .active。

<template>
  <div>
    <b-form-group label="Button style radios" v-slot="{ ariaDescribedby }">
      <b-form-radio-group
        id="btn-radios-1"
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="radios-btn-default"
        buttons
      ></b-form-radio-group>
    </b-form-group>

    <b-form-group
      label="Button style radios with outline-primary variant and size lg"
      v-slot="{ ariaDescribedby }"
    >
      <b-form-radio-group
        id="btn-radios-2"
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        button-variant="outline-primary"
        size="lg"
        name="radio-btn-outline"
        buttons
      ></b-form-radio-group>
    </b-form-group>

    <b-form-group label="Stacked button style radios" v-slot="{ ariaDescribedby }">
      <b-form-radio-group
        id="btn-radios-3"
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="radio-btn-stacked"
        buttons
        stacked
      ></b-form-radio-group>
    </b-form-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: 'radio1',
        options: [
          { text: 'Radio 1', value: 'radio1' },
          { text: 'Radio 3', value: 'radio2' },
          { text: 'Radio 3 (disabled)', value: 'radio3', disabled: true },
          { text: 'Radio 4', value: 'radio4' }
        ]
      }
    }
  }
</script>

<!-- b-form-radio-buttons.vue -->

非自定义样式单选框输入（普通）

可以通过设置 plain 属性，让 <b-form-radio> 和 <b-form-radio-group> 呈现浏览器本机样式的单选框输入。

<template>
  <div>
    <b-form-group label="Plain inline radios" v-slot="{ ariaDescribedby }">
      <b-form-radio-group
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="plain-inline"
        plain
      ></b-form-radio-group>
    </b-form-group>

    <b-form-group label="Plain stacked radios" v-slot="{ ariaDescribedby }">
      <b-form-radio-group
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="plain-stacked"
        plain
        stacked
      ></b-form-radio-group>
    </b-form-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: 'first',
        options: [
          { text: 'First radio', value: 'first' },
          { text: 'Second radio', value: 'second' },
          { text: 'Third radio', value: 'third' }
        ]
      }
    }
  }
</script>

<!-- b-form-radio-plain.vue -->

注意：如果设置了 buttons/button，则 plain 将不起作用。

必需约束

在使用单独的 <b-form-radio> 组件（不在 <b-form-radio-group> 中）时，并且希望在表单中将单选按钮设为 required，则必须在每个 <b-form-radio> 上提供一个 name，才能使必需约束生效。所有绑定到相同 v-model 的 <b-form-radio> 组件必须具有相同的 name。

为了让辅助技术（例如屏幕阅读器和仅键盘用户）知道哪些单选按钮属于同一表单变量（该名称还自动启用本机浏览器键盘导航），因此需要 name，因此 required 仅在设置 name 时才起作用。如果未在组上提供 <b-form-radio-group>，它将自动生成一个唯一的输入名称。

自动对焦

当在 <b-form-radio> 上设置 autofocus 属性时，将在将其插入（即挂载）到文档中或在 Vue <keep-alive> 组件中重新激活时自动聚焦输入。请注意，此属性不会在输入上设置 autofocus 属性，也无法判断输入何时变为可见。

上下文状态

Bootstrap 包含对大多数表单控件的 valid 和 invalid 状态的验证样式。

一般来说，你会希望对特定类型的反馈使用特定状态

  • false（表示无效状态）非常适合有阻止或必需字段的情况。用户必须正确填写此字段才能提交表单。
  • true（表示有效状态）非常适合在整个表单中进行逐字段验证并希望鼓励用户完成其余字段的情况。
  • null 不显示验证状态（既不有效也不无效）

若要在 <b-form-radio> 上应用其中一个上下文状态图标，请将 state 属性设置为 false（无效）、true（有效）或 null（无验证状态）。

注意：按钮模式下呈现的单选按钮不支持上下文状态。

带反馈的上下文状态示例

<template>
  <div>
    <b-form-radio-group v-model="value" :options="options" :state="state" name="radio-validation">
      <b-form-invalid-feedback :state="state">Please select one</b-form-invalid-feedback>
      <b-form-valid-feedback :state="state">Thank you</b-form-valid-feedback>
    </b-form-radio-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: null,
        options: [
          { text: 'First radio', value: 'first' },
          { text: 'Second radio', value: 'second' },
          { text: 'Third radio', value: 'third' }
        ]
      }
    },
    computed: {
      state() {
        return Boolean(this.value)
      }
    }
  }
</script>

<!-- b-form-radio-validation.vue -->

向辅助技术和色盲用户传达上下文验证状态

使用这些上下文状态来表示表单控件的状态仅提供视觉的、基于颜色的指示，而不会传达给辅助技术（如屏幕阅读器）的用户或色盲用户。

确保还提供了状态的替代指示。例如，你可以在表单控件的 <label> 文本本身中包含有关状态的提示，或通过提供其他帮助文本块（即 <b-form-invalid-feedback>）。特别是对于辅助技术，无效的表单控件还可以分配一个 aria-invalid="true" 属性（见下文）。

ARIA aria-invalid 属性

当 <b-form-radio-group> 具有无效的上下文状态（即 state = false）时，你可能还希望将 <b-form-radio-group> 属性 aria-invalid 设置为 true。

支持的 aria-invalid 值为

  • false（默认值）未检测到错误
  • true 该值未通过验证。

aria-invalid 如果 state 属性为 false，则自动设置为 true。

组件参考

<b-form-radio-group>

查看源代码

组件别名

<b-form-radio-group> 还可以通过以下别名使用

  • <b-radio-group>

注意：仅在导入所有 BootstrapVue 或使用组件组插件时才可以使用组件别名。

属性

所有属性默认值均可 全局配置。

属性
(点击按升序排列)
类型
(点击按升序排列)
默认值
描述
aria-invalid
Boolean 或 Stringfalse设置包装元素上的“aria-invalid”属性值。如果未提供，则“state”属性将控制该属性
autofocus
Booleanfalse设置为 `true` 时，尝试在控件挂载时自动聚焦该控件，或在保持活动状态时重新激活该控件。不会在控件上设置 `autofocus` 属性
button-variant
String指定要应用于按钮样式单选按钮的 Bootstrap 上下文颜色主题变体
buttons
Booleanfalse设置后，以按钮样式呈现此组中的单选按钮
checked
v-model 		Any组中已选中单选按钮的当前值
disabled
Booleanfalse设置为 `true` 时，禁用组件的功能并将其置于禁用状态
disabled-field
String'disabled'`options` 数组中应用于禁用状态的字段名称
表单
String表单控件所属的表单 ID。在控件上设置 `form` 属性
html-field
谨慎使用 		String'html'`options` 数组中的字段名称，应将其用于 html 标签，而不是文本字段
id
String用于设置呈现内容上的 `id` 属性，并用作根据需要生成任何其他元素 ID 的基础
name
String设置表单控件上 `name` 属性的值
options
Array 或 Object[]在组件中呈现的项目数组
plain
Booleanfalse以普通模式呈现表单控件，而不是自定义样式模式
required
Booleanfalse将 `required` 属性添加到表单控件
size
String设置组件外观的大小。'sm'、'md'（默认）或 'lg'
stacked
Booleanfalse设置后，以堆叠模式呈现单选按钮组
state
Booleannull控制组件的验证状态外观。`true` 表示有效，`false` 表示无效，或 `null` 表示无验证状态
text-field
String'text'`options` 数组中的字段名称，应将其用于文本标签
validated
Booleanfalse设置后，将 Bootstrap 类 'was-validated' 添加到组包装器
value-field
String'value'`options` 数组中的字段名称，应将其用于值

注意：支持 HTML 字符串 (*-html) 的属性在传递原始用户提供的值时容易受到 跨站脚本 (XSS) 攻击 的影响。您必须首先正确地 清理 用户输入！

v-model

属性
事件
checkedinput

插槽

名称
描述
default 内容（表单单选按钮）放置在表单单选按钮组中
第一个 放置 b-form-radio 的插槽，以便它们出现在从 options prop 生成的单选按钮之前

事件

事件
参数
描述
更改
  1. checked - 单选按钮组的当前选定值
当选定值因用户交互而更改时发出
input
  1. checked - 单选按钮组的当前选定值
当选定值更改时发出

<b-form-radio>

查看源代码

组件别名

<b-form-radio> 还可以通过以下别名使用

  • <b-radio>

注意：仅在导入所有 BootstrapVue 或使用组件组插件时才可以使用组件别名。

属性

所有属性默认值均可 全局配置。

属性
(点击按升序排列)
类型
(点击按升序排列)
默认值
描述
aria-label
String设置渲染元素上 `aria-label` 属性的值
aria-labelledby
String为该组件提供标签的元素的 ID。用作 `aria-labelledby` 属性的值
autofocus
Booleanfalse设置为 `true` 时，尝试在控件挂载时自动聚焦该控件，或在保持活动状态时重新激活该控件。不会在控件上设置 `autofocus` 属性
按钮
Booleanfalse设置后，以按钮的外观呈现单选按钮
button-variant
String在“按钮”模式下应用 Bootstrap 的主题颜色之一
checked
v-model 		Anynull单选按钮的当前值
disabled
Booleanfalse设置为 `true` 时，禁用组件的功能并将其置于禁用状态
表单
String表单控件所属的表单 ID。在控件上设置 `form` 属性
id
String用于设置呈现内容上的 `id` 属性，并用作根据需要生成任何其他元素 ID 的基础
内联
Booleanfalse设置后，将单选按钮呈现为内联元素，而不是 100% 宽度块
name
String设置表单控件上 `name` 属性的值
plain
Booleanfalse以普通模式呈现表单控件，而不是自定义样式模式
required
Booleanfalse将 `required` 属性添加到表单控件
size
String设置组件外观的大小。'sm'、'md'（默认）或 'lg'
state
Booleannull控制组件的验证状态外观。`true` 表示有效，`false` 表示无效，或 `null` 表示无验证状态
值
Any选中此单选按钮时返回的值

v-model

属性
事件
checkedinput

插槽

名称
描述
default 放置在表单单选按钮中的内容

事件

事件
参数
描述
更改
  1. checked - 单选按钮组的当前选定值
当选定值因用户交互而更改时发出
input
  1. checked - 单选按钮组的当前选定值
当选定值更改时发出

导入单个组件

您可以通过以下命名导出将单个组件导入到您的项目中

组件
命名导出
导入路径
<b-form-radio-group>BFormRadioGroupbootstrap-vue
<b-form-radio>BFormRadiobootstrap-vue

示例

import { BFormRadioGroup } from 'bootstrap-vue'
Vue.component('b-form-radio-group', BFormRadioGroup)

作为 Vue.js 插件导入

此插件包含以上列出的所有单个组件。插件还包括任何组件别名。

命名导出
导入路径
FormRadioPluginbootstrap-vue

示例

import { FormRadioPlugin } from 'bootstrap-vue'
Vue.use(FormRadioPlugin)