vue单选按钮的实现

实现单选按钮的基本方法

在Vue中实现单选按钮通常使用v-model指令绑定数据，结合input元素的type="radio"属性。以下是一个基础示例：

<template>
  <div>
    <input type="radio" id="option1" value="Option 1" v-model="selectedOption">
    <label for="option1">Option 1</label>

    <input type="radio" id="option2" value="Option 2" v-model="selectedOption">
    <label for="option2">Option 2</label>

    <p>Selected: {{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: ''
    }
  }
}
</script>

使用组件化方式封装单选按钮

对于需要复用的场景，可以创建可复用的单选按钮组件：

<!-- RadioButton.vue -->
<template>
  <div>
    <input 
      type="radio" 
      :id="id" 
      :value="value" 
      v-model="modelValue"
      @change="$emit('update:modelValue', value)"
    >
    <label :for="id">{{ label }}</label>
  </div>
</template>

<script>
export default {
  props: {
    id: String,
    value: String,
    label: String,
    modelValue: String
  }
}
</script>

父组件中使用方式：

<template>
  <div>
    <RadioButton 
      id="opt1" 
      value="A" 
      label="Option A" 
      v-model="selected"
    />
    <RadioButton 
      id="opt2" 
      value="B" 
      label="Option B" 
      v-model="selected"
    />
  </div>
</template>

<script>
import RadioButton from './RadioButton.vue'

export default {
  components: { RadioButton },
  data() {
    return {
      selected: 'A'
    }
  }
}
</script>

使用第三方UI库的单选按钮

主流UI库如Element UI、Vuetify等提供了封装好的单选组件：

Element UI示例：

<template>
  <el-radio-group v-model="radio">
    <el-radio :label="1">Option A</el-radio>
    <el-radio :label="2">Option B</el-radio>
  </el-radio-group>
</template>

<script>
export default {
  data() {
    return {
      radio: 1
    }
  }
}
</script>

Vuetify示例：

<template>
  <v-radio-group v-model="radio">
    <v-radio label="Option 1" value="1"></v-radio>
    <v-radio label="Option 2" value="2"></v-radio>
  </v-radio-group>
</template>

动态生成单选按钮列表

当选项来自API或需要动态生成时：

<template>
  <div v-for="option in options" :key="option.value">
    <input 
      type="radio" 
      :id="option.value" 
      :value="option.value" 
      v-model="selectedOption"
    >
    <label :for="option.value">{{ option.text }}</label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: 'a',
      options: [
        { value: 'a', text: 'Alpha' },
        { value: 'b', text: 'Beta' },
        { value: 'c', text: 'Gamma' }
      ]
    }
  }
}
</script>

样式自定义技巧

通过CSS自定义单选按钮外观：

/* 隐藏原生单选按钮 */
input[type="radio"] {
  opacity: 0;
  position: absolute;
}

/* 自定义样式 */
input[type="radio"] + label {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
}

input[type="radio"] + label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border: 2px solid #ddd;
  border-radius: 50%;
}

input[type="radio"]:checked + label:before {
  background-color: #42b983;
  border-color: #42b983;
}