如何在Vuetify 3中完全隐藏v-radio的单选按钮图标

以下是几种可行的方法，帮你彻底去掉单选按钮图标并释放它占据的空间：

方法1：自定义CSS（最直接） #

Vuetify 3里，单选按钮的图标容器类名是.v-radio__input，直接给这个类设置display: none就能完全移除图标和它的占位空间。操作步骤：

• 给v-radio组件添加自定义类，比如no-radio-icon：

<v-radio class="no-radio-icon" label="你的选项标签" v-model="selectedValue"></v-radio>

• 然后根据样式作用域写对应代码：

  /* scoped样式下需要用深度选择器 */
  ::v-deep .no-radio-icon .v-radio__input {
    display: none;
  }
  
  /* 全局样式下直接写 */
  .no-radio-icon .v-radio__input {
    display: none;
  }
  

方法2：组件props配合样式调整 #

如果用icon=""和off-icon=""只是让图标变透明，还可以通过调整标签内边距消除占位：

<v-radio 
  icon="" 
  off-icon="" 
  label="你的选项标签" 
  v-model="selectedValue"
  class="remove-radio-padding"
></v-radio>

::v-deep .remove-radio-padding .v-radio__label {
  padding-left: 0; /* 移除标签左侧原本给图标预留的内边距 */
}

方法3：手动模拟单选按钮行为（完全自定义场景） #

如果不想依赖v-radio的默认结构，也可以用v-label配合v-model实现：

<v-label 
  @click="selectedValue = 'targetValue'"
  :class="{ 'v-label--active': selectedValue === 'targetValue' }"
>
  你的选项标签
</v-label>

点击标签就能切换选中状态，完全没有图标占位，还能自由定制选中样式。

内容的提问来源于stack exchange，提问作者Andrian SP