uniapp实心单选框

### 实现实心单选框的样式或功能 在 UniApp 中实现一个实心单选框的功能，可以通过自定义样式结合 HTML 和 CSS 来完成。以下是一个示例代码，展示了如何通过覆盖默认样式来实现一个实心单选框的效果。 ```html <template> <view class="radio-container"> <label v-for="(item, index) in options" :key="index" class="custom-radio"> <input type="radio" :value="item.value" v-model="selectedValue" class="hidden-radio" /> <view class="radio-circle" :class="{ 'selected': selectedValue === item.value }"> <!-- 如果选中，则显示实心圆 --> <view class="fill-circle" v-if="selectedValue === item.value"></view> </view> <text>{{ item.label }}</text> </label> </view> </template> <script> export default { data() { return { selectedValue: '', // 当前选中的值 options: [ { value: 'option1', label: '选项一' }, { value: 'option2', label: '选项二' }, { value: 'option3', label: '选项三' } ] }; } }; </script> <style scoped> .radio-container { display: flex; flex-direction: column; gap: 10px; } .custom-radio { display: flex; align-items: center; gap: 10px; } .hidden-radio { display: none; /* 隐藏默认的单选框 */ } .radio-circle { width: 20px; height: 20px; border: 2px solid #ccc; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .radio-circle.selected { border-color: #4caf50; /* 选中时边框颜色变化 */ } .fill-circle { width: 12px; height: 12px; background-color: #4caf50; /* 实心圆的颜色 */ border-radius: 50%; } text { font-size: 16px; } </style> ``` #### 样式说明 - 默认的单选框被隐藏，使用 `display: none`[^1]。 - 自定义了一个圆形的容器 `.radio-circle`，并设置其宽度和高度为 20px，边框为 2px 的灰色[^1]。 - 在选中状态下，通过 `v-if` 动态显示一个内部的小实心圆 `.fill-circle`，并改变外圈的颜色[^1]。 - 使用了 `transition` 属性让样式的切换更加平滑。 ### 注意事项 - 确保 `v-model` 绑定的数据能够正确反映当前选中的状态。 - 如果需要兼容更多端（如小程序、H5 等），可以参考深度作用选择器的相关技巧[^2]。 - 封装组件可能会限制一定的样式自定义性，因此推荐直接使用自定义样式[^3]。