Question

我已经在我的Vue JS项目中使用了引导程序按钮样式复选框，该复选框可以正常工作，并且应该正常工作，但是，我希望在以下情况下将按钮样式复选框变体从outline-secondary更改为success点击。

有人可以建议如何实现这一目标吗？

下面是一个代码段，显示了默认为outline-secondary变体的选项。

<template>
  <div>
    <b-form-group>
      <b-form-checkbox-group v-model="selected"
                             buttons
                             button-variant="outline-secondary"
                             name="buttons2"
                             :options="options">
      </b-form-checkbox-group>
    </b-form-group>
  </div>
</template>

<script>
export default {
  data () {
    return {
      selected: [],
      options: [
        {text: '1 week', value: '1 week'},
        {text: '1 month', value: '1 month'},
        {text: '1 year', value: '1 year'},
        {text: '1 decade', value: '1 decade'}
      ]
    }
  }
}
</script>

任何帮助将不胜感激。

干杯

蚂蚁

Answer 1

为此，我最快的解决方案是：

  <div class="my-buttons">
    <b-form-group>
      <b-form-checkbox-group v-model="selected"
                             buttons
                             button-variant="outline-secondary"
                             name="buttons2"
                             :options="options">
      </b-form-checkbox-group>
    </b-form-group>
  </div>


<style>
  .my-buttons .active {
    color: #fff !important;
    background-color: #28a745 !important;
    border-color: #28a745 !important;
  }
</style>

我添加了父类我的按钮和重叠的类 .active 。因为您的复选框将在您单击 .active 类时被选中，因此该类将被选中。

单击时如何更改Bootstrap Vue按钮样式复选框的变体

1 个答案: