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 的数据响应式特性。