如何在 bootstrap-vue 切换按钮中更改背景颜色

Posted 2023-02-22

【中文标题】如何在 bootstrap-vue 切换按钮中更改背景颜色

【英文标题】：how to change background-color in bootstap-vue toggler button

【发布时间】：2021-08-29 01:20:14

【问题描述】：

我正在为自己的技能开发工作 vue js 项目。

当我更改 bootstrap-vue 切换器背景颜色但不幸的是背景颜色没有更改？我是 Vue js 的新手。如果可以，请解决这个问题？

Vue结构：-

<div class="toggler-btn">
 <b-form-checkbox v-model="checked" name="check-button" switch>
 </b-form-checkbox>
</div>

风格：-

<style scoped>
.custom-control-input:checked ~ .custom-control-label::before 
    color: #fff;
    border-color: red !important;
    background-color: red !important;
  
</style>

【参考方案1】：

您的问题是因为style 范围。你可以创建一个global.css 并将你所有的全局样式放在那里。我根据您的代码准备了一个工作代码 sn-p 以查看它是否正常工作。

new Vue(
  el: '#app'
)

.custom-control-input:checked~.custom-control-label::before 
  color: #fff;
  border-color: red !important;
  background-color: red !important;

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-form-checkbox name="check-button" switch size="lg" />
</div>

【讨论】：

欢迎您:)，如果您觉得有帮助，请考虑接受。

【参考方案2】：

这可能是由于范围样式造成的。试试这个：

 <style scoped>

      ::v-deep(.toggler-btn) 
          .custom-control-input:checked ~ .custom-control-label::before 
              color: #fff;
              border-color: red !important;
              background-color: red !important;
          
      

  </style>

【讨论】：

还没醒：-_-

您可以尝试删除 scoped 属性吗？

vue 中有多种不同的深度样式设置方法，具体取决于您的版本。 ***.com/questions/48032006/…

是的。我删除了作用域属性，但没有工作。