vue 实现模拟的radio
在 Vue 中实现模拟的 Radio（单选按钮）可以通过自定义样式和交互逻辑来完成，以下是具体实现方法：
数据绑定与状态管理
使用 v-model 绑定单选值到 Vue 的 data 属性。例如：
<template>
<div class="radio-group">
<div
v-for="option in options"
:key="option.value"
class="radio-option"
:class="{ 'active': selected === option.value }"
@click="selected = option.value"
>
{{ option.label }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
selected: '',
options: [
{ label: '选项1', value: '1' },
{ label: '选项2', value: '2' }
]
}
}
}
</script>自定义样式
通过 CSS 模拟 Radio 的选中/未选中状态：
.radio-option {
padding: 8px 16px;
border: 1px solid #ddd;
cursor: pointer;
margin-right: 8px;
display: inline-block;
border-radius: 4px;
}
.radio-option.active {
background-color: #1890ff;
color: white;
border-color: #1890ff;
}组件化封装（可选）
将逻辑封装为可复用的组件：
<!-- SimulatedRadio.vue -->
<template>
<div class="simulated-radio">
<div
v-for="item in options"
:key="item.value"
class="radio-item"
:class="{ 'selected': value === item.value }"
@click="$emit('input', item.value)"
>
{{ item.label }}
</div>
</div>
</template>
<script>
export default {
props: {
value: { type: [String, Number], default: '' },
options: { type: Array, required: true }
}
}
</script>使用原生 Radio 增强可访问性
如果需要兼顾无障碍访问，可以隐藏原生 Radio 但保留其功能：
<label class="custom-radio">
<input
type="radio"
v-model="selected"
:value="option.value"
style="opacity: 0; position: absolute;"
>
<span class="radio-mark">{{ option.label }}</span>
</label>动画效果增强交互
添加过渡动画使交互更自然：
.radio-option {
transition: all 0.3s ease;
}
.radio-option:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}通过以上方式可以灵活实现符合项目设计风格的 Radio 组件，同时保持 Vue 的数据响应式特性。
