vuetify的单选框组件,v-radio和v-radio-group变为正方形勾号的方法

219 阅读1分钟

radio2.jpg

原来的radio框是圆框圆点的样式的,可能会有需求让其变为方形勾号

<v-radio-group true-icon="mdi-checkbox-marked" false-icon="mdi-checkbox-blank-outline" v-model="expForm.isPreBuild" class="square-radio-group"> <v-radio :value="true" :label="$t('addShop.yes')" color="#123d65"></v-radio> <v-radio :value="false" :label="$t('addShop.no')" color="#123d65"></v-radio> </v-radio-group>

只需要在v-radio-group或v-radio标签里加上true-icon和false-icon属性,我直接写在了v-radio-group上,就不需要每隔每个v-radio都写一遍了

true-icon="mdi-checkbox-marked" false-icon="mdi-checkbox-blank-outline"

就可以自定义图标了,以上代码是把原来的圆框圆点,变成方框勾号,想自定义其他图标的可以去mdi找自己需要的图标,mdi链接

改变后的效果如下

radio1.jpg