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 option: {{ selectedOption }}</p>
  </div>
</template>

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

动态生成单选按钮组

当选项需要从数据动态生成时，可以使用v-for指令：

<template>
  <div>
    <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.label }}</label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { value: 'A', label: 'Option A' },
        { value: 'B', label: 'Option B' },
        { value: 'C', label: 'Option C' }
      ]
    }
  }
}
</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>

表单验证集成

结合Vuelidate进行表单验证：

<template>
  <form @submit.prevent="submitForm">
    <div v-for="option in options" :key="option.value">
      <input
        type="radio"
        :id="option.value"
        :value="option.value"
        v-model="form.selectedOption"
        @blur="$v.form.selectedOption.$touch()"
      >
      <label :for="option.value">{{ option.label }}</label>
    </div>
    <span v-if="$v.form.selectedOption.$error">Please select an option</span>

    <button type="submit">Submit</button>
  </form>
</template>

<script>
import { required } from 'vuelidate/lib/validators'

export default {
  data() {
    return {
      form: {
        selectedOption: null
      },
      options: [
        { value: 'yes', label: 'Yes' },
        { value: 'no', label: 'No' }
      ]
    }
  },
  validations: {
    form: {
      selectedOption: { required }
    }
  },
  methods: {
    submitForm() {
      this.$v.$touch()
      if (!this.$v.$invalid) {
        // 提交逻辑
      }
    }
  }
}
</script>

样式定制方法

使用CSS自定义单选按钮样式：

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

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { value: '1', label: 'Red' },
        { value: '2', label: 'Blue' },
        { value: '3', label: 'Green' }
      ]
    }
  }
}
</script>

<style>
.radio-input {
  position: absolute;
  opacity: 0;
}

.radio-custom {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  border: 2px solid #ccc;
  border-radius: 50%;
  vertical-align: middle;
}

.radio-input:checked + .radio-custom {
  background-color: #4CAF50;
  border-color: #4CAF50;
}

.radio-input:checked + .radio-custom::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
}

.radio-label {
  display: block;
  margin-bottom: 8px;
  cursor: pointer;
}
</style>