vue radio组件实现

2026-01-15 00:16:02VUE

Vue Radio 组件实现

在 Vue 中实现 Radio 组件可以通过原生 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>
    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

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

自定义 Radio 组件

创建一个可复用的 Radio 组件：

<!-- RadioButton.vue -->
<template>
  <label>
    <input
      type="radio"
      :checked="modelValue === value"
      @change="$emit('update:modelValue', value)"
      :value="value"
    />
    {{ label }}
  </label>
</template>

<script>
export default {
  props: {
    label: String,
    value: [String, Number],
    modelValue: [String, Number]
  }
}
</script>

使用自定义组件

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

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

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

使用第三方 UI 库

许多流行的 Vue UI 库都提供了现成的 Radio 组件：

Element UI: <el-radio>
Vuetify: <v-radio>
Ant Design Vue: <a-radio>

样式自定义

可以通过 CSS 自定义 Radio 按钮的外观：

/* 隐藏原生 Radio 按钮 */
input[type="radio"] {
  opacity: 0;
  position: absolute;
}

/* 自定义 Radio 样式 */
input[type="radio"] + label:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  border: 1px solid #ccc;
  border-radius: 50%;
  vertical-align: middle;
}

input[type="radio"]:checked + label:before {
  background-color: #409eff;
  border-color: #409eff;
}

Radio 组实现

对于一组互斥的 Radio 按钮，可以使用相同的 v-model 绑定：

vue radio组件实现

<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: 'opt1', label: 'Option 1' },
        { value: 'opt2', label: 'Option 2' },
        { value: 'opt3', label: 'Option 3' }
      ]
    }
  }
}
</script>

这些方法涵盖了从基础实现到自定义组件再到使用 UI 库的不同方式，可以根据项目需求选择合适的方案。