vue radio组件实现

Vue Radio 组件实现方法

基础实现方式

使用原生 HTML 的 input 元素结合 Vue 的 v-model 指令可以快速实现单选功能。通过 v-model 绑定同一个变量，确保单选效果。

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

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

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

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

组件化封装

将单选按钮封装为可复用的组件，通过 props 接收选项列表和当前值，通过 emit 通知父组件选择变化。

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

<script>
export default {
  props: {
    options: {
      type: Array,
      required: true
    },
    modelValue: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      internalValue: this.modelValue
    }
  },
  watch: {
    modelValue(newVal) {
      this.internalValue = newVal
    }
  }
}
</script>

使用封装组件

父组件中使用封装好的单选组件，通过 v-model 进行双向绑定。

<template>
  <RadioGroup 
    v-model="selectedOption"
    :options="[
      { value: 'opt1', label: 'Option 1' },
      { value: 'opt2', label: 'Option 2' }
    ]"
  />
  <p>Selected: {{ selectedOption }}</p>
</template>

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

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

UI 库集成

对于需要更丰富样式和功能的场景，可以直接使用 UI 库提供的单选组件。

Element UI 示例：

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

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

Ant Design Vue 示例：

<template>
  <a-radio-group v-model:value="value">
    <a-radio value="A">Option A</a-radio>
    <a-radio value="B">Option B</a-radio>
  </a-radio-group>
</template>

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

自定义样式

通过 CSS 自定义单选按钮样式，通常需要隐藏原生输入框，使用伪元素创建自定义外观。

<template>
  <div class="custom-radio">
    <input 
      type="radio" 
      id="custom1" 
      value="custom1" 
      v-model="customOption"
    >
    <label for="custom1">Custom Style</label>
  </div>
</template>

<style>
.custom-radio input[type="radio"] {
  opacity: 0;
  position: absolute;
}

.custom-radio label {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
}

.custom-radio label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border: 2px solid #ddd;
  border-radius: 50%;
}

.custom-radio input[type="radio"]:checked + label:after {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 12px;
  height: 12px;
  background: #409eff;
  border-radius: 50%;
}
</style>