Question

我正在使用Vuetify.js作为Nuxt.js的UI框架，当复选框禁用值更改为“ false”时，我想更改复选框的颜色。我以为如果用CSS更改与复选框相对应的部分的值，则可以更改复选框的颜色。但这没有用。谁能告诉我？我的代码是以下代码。

    <template>
  <v-card>
    <v-card-text>
      <v-container>
        <v-row>
          <v-col cols="4">
            <v-checkbox
              :label="`Checkbox A:${checkboxA}`"
              v-model="checkboxA"></v-checkbox>
          </v-col>
          <v-col cols="4">
            <v-checkbox
              :label="`Checkbox B:${checkboxB}`"
              :disabled="!checkboxA"></v-checkbox>
          </v-col>
        </v-row>
      </v-container>
    </v-card-text>
  </v-card>
</template>
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'

@Component({})
export default class extends Vue{
  checkboxA:boolean = false
  checkboxB:boolean = false
  checkboxC:boolean = false
}
</script>

<style lang="scss" scoped>
.div ::v-deep .v-input--selection-controls__input{
  background: gray;
}
</style>

Answer 1

在scoped中使用style有点棘手。使用范围，父组件的样式不会泄漏到子组件中。您可以使用深度选择器>>>（如解释的here），但我认为这种解决方案不是最佳选择。使用BEM表示法的CSS更好。就您而言，我会这样做：

 <template>
  <v-card>
    <v-card-text>
      <v-container class="Card__container">
        <v-row>
          <v-col cols="4">
            <v-checkbox
              :label="`Checkbox A:${checkboxA}`"
              v-model="checkboxA"></v-checkbox>
          </v-col>
          <v-col cols="4">
            <v-checkbox
              :label="`Checkbox B:${checkboxB}`"
              :disabled="!checkboxA"></v-checkbox>
          </v-col>
        </v-row>
      </v-container>
    </v-card-text>
  </v-card>
</template>
<script lang="ts">
...
</script>

<style lang="scss">
.Card__container {
    .v-input--selection-controls__input{
      background: gray;
    }
}
</style>

因此，与其他组件没有冲突的风险。

在Vuetify的复选框组件中，如何更改禁用的复选框的框颜色？

1 个答案: