单选择表单(Form Radio Inputs)

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

单个 radios

Individual radios
Selected: 
<template>
  <div>
    <b-form-group label="Individual radios">
      <b-form-radio v-model="selected" name="some-radios" value="A">Option A</b-form-radio>
      <b-form-radio v-model="selected" 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>

分组 radios

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

Radios using options
Radios using sub-components
Selected: first
<template>
  <div>
    <b-form-group label="Radios using options">
      <b-form-radio-group
        id="radio-group-1"
        v-model="selected"
        :options="options"
        name="radio-options"
      ></b-form-radio-group>
    </b-form-group>

    <b-form-group label="Radios using sub-components">
      <b-form-radio-group id="radio-group-2" v-model="selected" 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> 中的 options 属性和 <b-form-radio> 。手动放置的 <b-form-radio> 输入将显示在由 options 属性生成的任何无线电输入 下面 。要使它们显示在由 options 生成的输入 上面 ，请 first【首先】将它们放置在指定的插槽中。

Radios using options and slots
Selected: 
<template>
  <div>
    <b-form-group label="Radios using options and slots">
      <b-form-radio-group
        id="radio-slots"
        v-model="selected"
        :options="options"
        name="radio-options-slots"
      >
        <!-- Radios in this slot will appear first -->
        <template v-slot: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>

radio 组 options 数组

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

  • value 将在 v-model 上设置的所选值
  • disabled 禁用的项目供选择
  • text 显示文本或 html 显示基本的嵌入式 html

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

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

请谨慎 将用户提供的内容放在 html 字段中，因为如果不先 清理 用户提供的字符串，这可能会使您容易受到 XSS attacks【XSS攻击】。

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

如果数组条目是字符串，则它将用于生成的 value 和 text 字段。

您可以在数组中使用字 strings 和 objects 进行混合。

在内部，BootstrapVue 会将上面的数组转换为下面的数组（ array of objects【对象数组】）格式：

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 会将上面的数组转换为下面的数组（ array of objects【对象数组】）格式：

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 属性设置为包含要使用的属性名称的字符串来轻松更改它们：

Selected: A
<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>

Radio 值和 v-model

<b-form-radio> 组件默认情况下没有值。您必须通过 <b-form-radio> 上的 value 属性显式提供一个值。检查 radio 时，此值将发送到 v-model 。

<b-form-radio> 和 <b-form-radio-group> 的 v-model 都绑定到 checked 属性。要预先检查 radio ，您必须将 v-model 值设置为 radio 的值之一（即必须与 radio 的 value 属性之一上指定的值匹配）。请勿直接使用 checked 属性。radio 组中的每个 radio 必须 具有唯一的值。

无线电支持许多类型的值，例如 string ，boolean ，number ，或一个普通 object 。

嵌入式或堆叠式 radio

默认情况下，<b-form-radio-group> 生成嵌入式 radio 输入，而 <b-form-radio> 生成 stacked【堆叠】的 radio。 将堆积在 <b-form-radio-group> 上的属性设置为使 radio 彼此重叠显示，或者当使用不在组中的 radio 时，将 b-form-radio 上的 inline【嵌入式】属性设置为 true，以使其内联。

Inline radios (default)
Stacked radios
Selected: first
<template>
  <div>
    <b-form-group label="Inline radios (default)">
      <b-form-radio-group
        v-model="selected"
        :options="options"
        name="radio-inline"
      ></b-form-radio-group>
    </b-form-group>

    <b-form-group label="Stacked radios">
      <b-form-radio-group
        v-model="selected"
        :options="options"
        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>

控制尺寸

使用 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>

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

注意： Bootstrap v4.x 本身不支持自定义 radio 控件的大小。但是，BootstrapVue 包含自定义SCSS / CSS，它增加了对自定义 radio 大小的支持。

按钮式 radio

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

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

当按钮式 radio 处于选中状态时，将自动将 .active 类应用于其标签。

Button style radios
Button style radios with outline-primary variant and size lg
Stacked button style radios 
<template>
  <div>
    <b-form-group label="Button style radios">
      <b-form-radio-group
        id="btn-radios-1"
        v-model="selected"
        :options="options"
        buttons
        name="radios-btn-default"
      ></b-form-radio-group>
    </b-form-group>

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

    <b-form-group label="Stacked button style radios">
      <b-form-radio-group
        id="btn-radios-3"
        v-model="selected"
        :options="options"
        buttons
        stacked
        name="radio-btn-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>

非定制样式的 radio 输入（普通）

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

Plain inline radios
Plain stacked radios 
<template>
  <div>
    <b-form-group label="Plain inline radios">
      <b-form-radio-group
        v-model="selected"
        :options="options"
        plain
        name="plain-inline"
      ></b-form-radio-group>
    </b-form-group>

    <b-form-group label="Plain stacked radios">
      <b-form-radio-group
        v-model="selected"
        :options="options"
        plain
        stacked
        name="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>

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

必需的约束

当使用单独的 <b-form-radio> 组件(不在 <b-form-radio-group> 中)，并且希望表单中 required【需要】radio 时，必须 在每个 <b-form-radio> 上提供一个 name ，以便所需的约束能够工作。绑定到同一 v-model 的所有 <b-form-radio> 组件 必须 具有相同的 name 。

name 是必需的，以便辅助技术（例如屏幕阅读器和仅键盘用户）知道哪些无线电属于同一表单变量（名称还自动启用本机浏览器键盘导航），因此 required【必须】 name 为组。 如果 <b-form-radio-group> 组中未提供一个唯一的输入 name ，它将自动生成一个唯一的输入名称。

自动获取焦点

当 autofocus 属性设置为 <b-form-radio> 时，输入将在插入（即 mounted【安装】）到文档中时自动对焦，或者在 Vue <keep-alive> 组件内部重新激活。请注意，此属性 不会 在输入上设置 autofocus 属性，也无法告诉输入何时可见。

上下文状态

Bootstrap 包括大多数表单控件上 valid 【有效】和 invalid【无效】状态的验证样式。

一般来说，您需要针对特定类型的反馈使用特定状态：

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

要在 <b-form-radio> 上应用上下文状态图标之一，请将 state【状态】属性设置为 false（对于无效），true（对于有效）或 null（无验证状态）。

注意： 在按钮模式下渲染的 radio 不支持上下文状态。

上下文状态与反馈示例

Please select one
Thank you
<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>

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

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

确保还提供了备用状态指示。例如，您可以在表单控件的 <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 该值验证失败。

如果 state【状态】属性为 false ，则将 aria-invalid 自动设置为 true 。

组件引用

<b-form-radio-group>

查看源代码

组件别名

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

  • <b-radio-group>

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

属性

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

v-model

属性 事件
checked input

插槽

插槽名称 描述
first 放置 b-form-radio 的位置，以便它们出现在由options 属性生成的 radio 之前

事件

事件 参数 描述
input
  1. checked - 当前选择的单选组的值。
 更改所选值时发出
change
  1. checked - 当前选择的单选组的值。
 由于用户交互而更改所选值时发出

<b-form-radio>

查看源代码

组件别名

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

  • <b-radio>

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

属性

属性 (Click to sort Ascending) 类型 默认值 描述
id String 用于在渲染的内容上设置“id”属性，并用作根据需要生成任何其他元素ID的基础
value Any 检查此 radio 时返回的值
checked v-model Any radio 的当前值
inline Boolean false 设置后，将 radio 作为内联元素而不是宽度为100％的块渲染
plain Boolean false 以普通模式而不是自定义样式模式呈现表单控件
button Boolean false 设置后，以按钮外观呈现 radio
button-variant String 在“button”模式下适用于 Bootstrap 的主题颜色
aria-label String 设置渲染元素上“aria-label”属性的值
aria-labelledby String 提供此组件标签的元素的ID。用作“aria-labelledby”属性的值
name String 设置表单控件上“name”属性的值
disabled Boolean 设置为“true”时，禁用组件的功能并将其置于禁用状态
required Boolean false 将“required”属性添加到表单控件
form String 表单控件所属的表单的ID。在控件上设置“form”属性
autofocus Boolean false 设置为“true”时，尝试在安装控件时自动将其调焦，或者在 keep-alive【保持活动】状态时将其重新激活。未在控件上设置“autofocus”属性
size String 设置组件外观的大小。'sm'，'md'（默认）或'lg'
state Boolean 控制组件的验证状态外观。“true”表示有效，“false”表示无效”，“null”表示无验证状态

v-model

属性 事件
checked input

事件

事件 参数 描述
input
  1. checked - 当前选择的单选组的值。
 更改所选值时发出
change
  1. checked - 当前选择的单选组的值。
 由于用户交互而更改所选值时发出

导入单个组件

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

组件 命名输出 导入路径
<b-form-radio-group> BFormRadioGroup bootstrap-vue
<b-form-radio> BFormRadio bootstrap-vue

示例：

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

导入为Vue.js插件

该插件包括上面列出的所有单个组件。插件还包括任何组件别名。

命名输出 导入路径
FormRadioPlugin bootstrap-vue

示例：

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