我正在使用Vuetify v-button-toggle
在三个按钮之间进行切换,如下所示。每个按钮都有不同的活动类别。但是单击按钮不会设置活动的各自活动类别。我想念的是什么?
<v-btn-toggle
v-model="justify"
borderless
dense
group
class="d-flex flex-column "
>
<v-btn active-class="dnrSelected" exact>
<v-icon right class="mr-2">mdi-close</v-icon>
<span>Do Not Recommend</span>
</v-btn>
<v-btn active-class="rSelected">
<v-icon right class="mr-1">mdi-check</v-icon>
<span>Recommend</span>
</v-btn>
<v-btn active-class="srSelected">
<v-icon right class="mr-1">mdi-check-all</v-icon>
<span>Strongly Recommend</span>
</v-btn>
</v-btn-toggle>
CSS类
<style scoped>
.dnrSelected {
background-color: #e57373;
}
.rSelected {
background-color: #c5e1a5;
}
.srSelected {
background-color: #81c784;
}
</style>
更新:按预期将类添加到了单击按钮上
<button type="button" class="v-btn srSelected v-btn--active v-btn--contained theme--light v-size--default"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate mr-1 v-icon--right mdi mdi-check-all theme--light"></i> <span>Strongly Recommend</span></span></button>
更新:下面的默认Vuetify类将覆盖自定义样式
.v-btn-toggle--group > .v-btn.v-btn {
background-color: transparent !important;
border-color: transparent;
margin: 4px;
min-width: auto;
}
如何覆盖此默认样式类?
答案 0 :(得分:0)
我刚刚尝试了Codepen,但效果很好。 https://codepen.io/v08i/pen/rNaXyxe
这是部分代码。完整的代码在codepen。
<div id="app">
<v-app id="inspire">
<v-card
flat
class="py-12"
>
<v-card-text>
<v-row
align="center"
justify="center"
>
<v-col cols="12">
<p class="text-center">Multiple</p>
</v-col>
<v-btn-toggle
v-model="toggle_exclusive"
>
<v-btn active-class="aa">
<v-icon>mdi-format-align-left</v-icon>
</v-btn>
<v-btn active-class="bb">
<v-icon>mdi-format-align-center</v-icon>
</v-btn>
<v-btn active-class="cc">
<v-icon>mdi-format-align-right</v-icon>
</v-btn>
<v-btn active-class="dd">
<v-icon>mdi-format-align-justify</v-icon>
</v-btn>
</v-btn-toggle>
<v-col
cols="12"
class="text-center"
>
Model: {{ toggle_exclusive }}
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-app>
</div>
一个建议。我认为范围限定的CSS可能是一团糟,因为它们是vuetify自己的组件。您可以从样式中删除scoped
并进行检查吗?
答案 1 :(得分:0)
我发现的一种解决方法是,通过为包含的元素提供一个如下所示的ID来专门针对自定义CSS中的元素
<v-btn-toggle
id="btnGroup"
borderless
dense
group
class="d-flex flex-column"
>
然后使用此id
指定如下的目标元素
#btnGroup .dnrSelected {
background-color: #ef9a9a !important;
}