vue radio组件实现

2026-01-08 14:01:04VUE

Vue Radio 组件实现

在 Vue 中实现 Radio 组件可以通过原生 HTML 的 <input type="radio"> 结合 Vue 的响应式特性，或者使用第三方 UI 库（如 Element UI、Ant Design Vue）提供的现成组件。以下是几种实现方式：

原生 HTML + Vue 实现

使用原生 <input type="radio"> 结合 v-model 实现双向绑定：

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

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

v-model 绑定到 selectedOption，用于同步选中的值。
value 属性定义每个 Radio 的值。

封装可复用的 Radio 组件

封装一个自定义的 Radio 组件，支持更灵活的配置：

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

<script>
export default {
  props: {
    options: {
      type: Array,
      required: true,
      validator: (options) =>
        options.every((opt) => opt.value && opt.label)
    },
    value: {
      type: [String, Number],
      required: true
    }
  },
  computed: {
    selectedValue: {
      get() {
        return this.value;
      },
      set(newValue) {
        this.$emit('input', newValue);
      }
    }
  }
};
</script>

使用方法：

<template>
  <RadioGroup
    v-model="selectedOption"
    :options="[
      { value: 'option1', label: 'Option 1' },
      { value: 'option2', label: 'Option 2' }
    ]"
    @change="handleChange"
  />
</template>

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

export default {
  components: { RadioGroup },
  data() {
    return {
      selectedOption: 'option1'
    };
  },
  methods: {
    handleChange(value) {
      console.log('Selected:', value);
    }
  }
};
</script>

通过 options 动态渲染 Radio 选项。
支持 v-model 双向绑定和 @change 事件。

使用第三方 UI 库

以 Element UI 为例：

<template>
  <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>
</template>

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

直接使用 <el-radio-group> 和 <el-radio> 组件。
支持更多功能如禁用状态、边框样式等。

动态生成 Radio 选项

从接口或动态数据生成 Radio 选项：

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

<script>
export default {
  data() {
    return {
      selectedDynamicOption: '',
      dynamicOptions: [
        { id: 1, value: 'dynamic1', text: 'Dynamic 1' },
        { id: 2, value: 'dynamic2', text: 'Dynamic 2' }
      ]
    };
  }
};
</script>