如何实现Bootstrap-Vue开关式复选框组的单选功能？

嘿，我懂你想要的那种只能选一个的开关式分组啦！你之前尝试用<b-form-checkbox-group>加:multiple="false"没生效，是因为这个组件从设计上就是为多选场景服务的，multiple属性对它来说默认就是启用状态，修改成false也没法让它切换到单选模式哦。

正确的做法是使用Bootstrap-Vue的<b-form-radio-group>组件，再加上switches属性，就能实现你要的「开关样式+单选限制」的效果啦！

完整代码示例 #

<template>
  <div>
    <b-form-radio-group 
      v-model="selected" 
      :options="options" 
      switches
    ></b-form-radio-group>
    <p class="mt-3">当前选中值: {{ selected }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: 'option1', // 默认选中项
      options: [
        { text: '选项一', value: 'option1' },
        { text: '选项二', value: 'option2' },
        { text: '选项三', value: 'option3' }
      ]
    }
  }
}
</script>

为什么这样可行？ #

• <b-form-radio-group>本身就是为单选场景设计的，同一时间只会允许选中一个选项，完美符合你的需求；
• 加上switches属性后，组件会把单选按钮渲染成开关样式，和你想要的效果完全匹配。

自定义单个开关选项 #

如果你需要更灵活的自定义（比如添加图标、调整样式），也可以单独使用<b-form-radio>并加上switch属性：

<template>
  <div class="btn-group">
    <b-form-radio v-model="selected" value="option1" switch>
      <i class="fa fa-sun mr-1"></i> 白天模式
    </b-form-radio>
    <b-form-radio v-model="selected" value="option2" switch>
      <i class="fa fa-moon mr-1"></i> 夜间模式
    </b-form-radio>
  </div>
</template>

内容的提问来源于stack exchange，提问作者Petro Gromovo