单选择表单(Form Radio Inputs)
为了实现跨浏览器的一致性,<b-form-radio-group>
和 <b-form-radio>
使用Bootstrap的自定义无线电输入来替换浏览器的默认无线电输入。它建立在语义和可访问标记之上,因此它是默认无线电输入的可靠替代。
单个 radios
<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。
<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
【首先】将它们放置在指定的插槽中。
<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
属性设置为包含要使用的属性名称的字符串来轻松更改它们:
<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,以使其内联。
<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
类应用于其标签。
<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>
呈现浏览器本机样式的单选输入。
<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 不支持上下文状态。
上下文状态与反馈示例
<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-form-radio-group>
v-model<b-form-radio-group>
插槽<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 |
|
更改所选值时发出 |
change |
|
由于用户交互而更改所选值时发出 |
组件别名
<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 |
|
更改所选值时发出 |
change |
|
由于用户交互而更改所选值时发出 |
导入单个组件
您可以通过以下命名的导出将单个组件导入到项目中:
组件 | 命名输出 | 导入路径 |
---|---|---|
<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)