如何在 Vuetify 中应用所选单选按钮的样式

Question

我有疑问，关于如何在选择“无线电”按钮时如何在V-Card周围的边界（或其他效果，例如背景颜色更改）。

<v-radio @change="setGewitchtsVal('3.5t')" label="3.5t" color="primary" value="3.5t" >
  <template v-slot:label>
    <v-card width="170" color="white" class="trucksicons d-flex align-center flex-column rounded-lg">
    <v-img contain height="60" :src="icon35t"></v-img>
    <span>3.5t</span>
    </v-card>
  </template> 
</v-radio>

我的radiogroup现在的图片是这样的（我去掉了radio button pins）

我知道如何悬停，但不知道如何突出显示所选内容。

Answer 1

使用active-class

<template>
  <v-radio active-class="active" ...>
  ...
  </v-radio>
</template>

<style scoped>
.active .trucksicons {
  border: 2px solid green;
}
</style>

如何在 Vuetify 中应用所选单选按钮的样式

How to apply style of selected radiobutton in Vuetify

radio-group

radio-button

vue.js

vuetify.js