vue.js - Bootstrap Vue 更改活动按钮颜色
问题描述
我正在使用带有 Vue.js 的引导程序。
我有一个这样的表单复选框组
<b-form-group label="Select flow" v-slot="{ ariaDescribedby }">
<b-form-checkbox-group
v-model="selected"
:options="options"
:aria-describedby="ariaDescribedby"
buttons
button-variant="primary"
size="lg"
name="buttons-2"
></b-form-checkbox-group>
</b-form-group>
我希望将所选按钮设置为特定颜色(而不是稍微暗一点)。
我尝试添加下面的代码,但不幸的是它不起作用
.active {
background: rgb(243, 16, 0) !important;
}
完整代码在这里:
<template>
<div class="Overview">
<b-form-group label="Select flow" v-slot="{ ariaDescribedby }">
<b-form-checkbox-group
v-model="selected"
:options="options"
:aria-describedby="ariaDescribedby"
buttons
button-variant="primary"
size="lg"
name="buttons-2"
></b-form-checkbox-group>
</b-form-group>
</div>
</div>
</template>
<script>
export default {
name: "Control",
data() {
return {
selected: "F1_Water",
options: [
{ value: "F1_Water", text: "Water" },
{ value: "F1_Clean", text: "Cleaning solution" },
{ value: "F1_None", text: "None" }
]
};
}
};
</script>
<style>
.active {
background: rgb(243, 16, 0) !important;
}
</style>
解决方案
您<style>
在结束标签之后错过了开始</script>
标签。
请记住,您不应该包含scoped
它,因为 css 样式的目标是不同的组件(b-form-checkbox-group
组件),所以它只是
<style>
.active {
background: rgb(243, 16, 0) !important;
}
</style>
以下是Vue.js中作用域 CSS功能的文档。
推荐阅读
- c++ - 有没有办法在 Linux 上使用 Xlib 创建一个始终位于顶部的窗口?
- database - IoTDB 不区分总和聚合中的零值和空值
- amazon-web-services - 解决HTTP请求头解析错误
- spring-mvc - API 调用的两种方式 SSL 证书
- javascript - 如何触发jquery自动完成单击具有现有值的输入和空输入的默认结果
- xml - 在 STS 中使用 mvn 导入项目时出现问题 - 错误的 xml 文件
- python - 当我尝试从 mlflow UI 下载工件时出现错误
- android - 在不使用 Firebase 的情况下通过 Kotlin 发送通知
- javascript - 来自动态添加的文本字段的输入未通过 request()->validate() 数组
- ios - 当应用处于后台时,无法接收 Xamarin.ios 应用的蓝牙事件