当前位置：首页 > VUE

vue radio组件实现

2026-03-28 13:26:04VUE

Vue Radio 组件实现

在 Vue 中实现单选按钮（Radio）组件可以通过原生 HTML 结合 Vue 的数据绑定，或者使用第三方 UI 库（如 Element UI、Vuetify 等）。以下是两种常见实现方式：

原生 HTML + Vue 实现

通过 v-model 绑定单选按钮的值，确保同一组 Radio 的 name 属性一致：

<template>
  <div>
    <label>
      <input 
        type="radio" 
        v-model="selectedOption" 
        name="options" 
        value="option1"
      >
      Option 1
    </label>
    <label>
      <input 
        type="radio" 
        v-model="selectedOption" 
        name="options" 
        value="option2"
      >
      Option 2
    </label>
    <p>Selected: {{ selectedOption }}</p>
  </div>
</template>

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

使用 Element UI 的 Radio 组件

若项目中使用 Element UI，可以直接使用其封装好的 el-radio 组件：

<template>
  <div>
    <el-radio-group v-model="selectedOption">
      <el-radio label="option1">Option 1</el-radio>
      <el-radio label="option2">Option 2</el-radio>
    </el-radio-group>
    <p>Selected: {{ selectedOption }}</p>
  </div>
</template>

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

自定义 Radio 组件

如果需要高度定制化的 Radio 组件，可以封装一个可复用的组件：

<!-- CustomRadio.vue -->
<template>
  <label class="custom-radio">
    <input 
      type="radio" 
      :checked="isChecked" 
      @change="$emit('change', value)" 
      :value="value"
    >
    <span class="radio-label">{{ label }}</span>
  </label>
</template>

<script>
export default {
  model: {
    prop: 'modelValue',
    event: 'change'
  },
  props: {
    label: String,
    value: [String, Number],
    modelValue: [String, Number]
  },
  computed: {
    isChecked() {
      return this.modelValue === this.value;
    }
  }
};
</script>

<style>
.custom-radio {
  display: flex;
  align-items: center;
  cursor: pointer;
}
</style>

使用自定义组件：

vue radio组件实现

<template>
  <div>
    <custom-radio 
      v-model="selectedOption" 
      label="Option 1" 
      value="option1"
    />
    <custom-radio 
      v-model="selectedOption" 
      label="Option 2" 
      value="option2"
    />
    <p>Selected: {{ selectedOption }}</p>
  </div>
</template>

<script>
import CustomRadio from './CustomRadio.vue';

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