我在我的一个Vue JS项目中使用了bootstraps按钮样式的复选框,它工作正常,然而,我希望按钮样式的复选框变体在单击时从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>
任何帮助都将不胜感激。
干杯,
蚂蚁
发布于 2018-07-31 03:50:09
我对此最快的解决方案是:
<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>
我已经添加了父类my-buttons和重叠类.active。因为当您单击复选框并将其选中时,它将显示该.active类。
https://stackoverflow.com/questions/51599545
复制相似问题