ant-design-vue封装单选按钮选中样式

在 ant-design-vue 中，可以使用 `Radio` 组件来实现单选按钮的功能。为了封装选中样式，你可以自定义一个样式类，然后在 `Radio` 组件中使用 `:class` 绑定来绑定这个样式类，当选中某个单选按钮时，这个样式类就会被添加到对应的单选按钮上。

例如，你可以在样式表中定义一个名为 `checked` 的样式类：

.checked {
  background-color: #1890ff;
  color: #fff;
}

然后，在 `Radio` 组件中使用 `:class` 绑定来绑定这个样式类：

<template>
  <a-radio v-model="selectedValue" :class="{ checked: selectedValue === 'A' }" value="A">Option A</a-radio>
  <a-radio v-model="selectedValue" :class="{ checked: selectedValue === 'B' }" value="B">Option B</a-radio>
  <a-radio v-model="selectedValue" :class="{ checked: selectedValue === 'C' }" value="C">Option C</a-radio>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: 'A',
    };
  },
};
</script>

在上面的代码中，当 `selectedValue` 的值为 `'A'` 时，`checked` 样式类就会被添加到第一个单选按钮上，从而实现了选中样式的封装。你可以根据自己的需求，修改 `checked` 样式类的样式来满足你的设计要求。