0

我正在使用 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>
4

2 回答 2

2

万一有人仍然有这个问题。除了使用disabled道具，您可以使用readonly道具并且仍然可以设置colour="success"或任何其他您想要的颜色。

于 2021-10-06T00:03:54.253 回答
2

使用scopedinstyle有点棘手。使用作用域，父组件的样式不会泄漏到子组件中。您可以使用深度选择器>>>（如解释here），但我认为这个解决方案不是最好的。Css 最好使用 BEM 表示法。在你的情况下，我会这样做：

 <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>

多亏了这一点，没有与其他组件发生冲突的风险。

于 2020-11-02T14:12:55.387 回答