vue 单选组合 实现

Vue 单选组合实现

在 Vue 中实现单选组合（Radio Group）可以通过多种方式完成，以下是一些常见的方法：

使用原生 HTML 和 v-model

通过原生 HTML 的 input[type="radio"] 结合 Vue 的 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>
    <label>
      <input type="radio" v-model="selectedOption" value="option3" />
      Option 3
    </label>
    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

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

使用第三方组件库

许多 Vue 组件库（如 Element UI、Vuetify、Ant Design Vue 等）提供了封装好的单选组合组件：

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 label="option3">Option 3</el-radio>
  </el-radio-group>
</template>

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

Vuetify 示例：

<template>
  <v-radio-group v-model="selectedOption">
    <v-radio label="Option 1" value="option1"></v-radio>
    <v-radio label="Option 2" value="option2"></v-radio>
    <v-radio label="Option 3" value="option3"></v-radio>
  </v-radio-group>
</template>

自定义 Radio Group 组件

如果需要高度定制化的单选组合，可以封装一个自定义组件：

<template>
  <div class="custom-radio-group">
    <div
      v-for="option in options"
      :key="option.value"
      class="custom-radio"
      :class="{ 'active': modelValue === option.value }"
      @click="$emit('update:modelValue', option.value)"
    >
      {{ option.label }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      required: true,
      validator: (options) => options.every(option => 'value' in option && 'label' in option)
    },
    modelValue: {
      type: [String, Number],
      required: true
    }
  },
  emits: ['update:modelValue']
}
</script>

<style>
.custom-radio-group {
  display: flex;
  gap: 10px;
}
.custom-radio {
  padding: 8px 16px;
  border: 1px solid #ddd;
  cursor: pointer;
}
.custom-radio.active {
  background-color: #409eff;
  color: white;
}
</style>

使用自定义组件：

<template>
  <CustomRadioGroup
    v-model="selectedOption"
    :options="[
      { value: 'option1', label: 'Option 1' },
      { value: 'option2', label: 'Option 2' },
      { value: 'option3', label: 'Option 3' }
    ]"
  />
</template>

动态生成选项

当选项需要从 API 或其他动态源获取时：

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

<script>
export default {
  data() {
    return {
      selectedOption: '',
      dynamicOptions: []
    }
  },
  async created() {
    // 模拟 API 调用
    this.dynamicOptions = await fetchOptions()
  },
  methods: {
    async fetchOptions() {
      // 实际项目中替换为真实的 API 调用
      return [
        { id: 1, value: 'opt1', label: 'Dynamic Option 1' },
        { id: 2, value: 'opt2', label: 'Dynamic Option 2' }
      ]
    }
  }
}
</script>

以上方法涵盖了从基础实现到高级定制的各种场景，可以根据项目需求选择最适合的方案。