当前位置：首页 > VUE

vue 实现模拟的radio

2026-02-23 23:43:02VUE

Vue 实现模拟 Radio 按钮

在 Vue 中实现模拟的 Radio 按钮可以通过自定义样式和逻辑绑定来实现，以下是具体的方法：

使用 `v-model` 绑定数据

通过 v-model 绑定一个变量到模拟的 Radio 按钮组，确保同一组 Radio 共享同一个 v-model 变量。

<template>
  <div class="radio-group">
    <div 
      class="radio-item" 
      v-for="option in options" 
      :key="option.value"
      @click="selected = option.value"
      :class="{ 'active': selected === option.value }"
    >
      {{ option.label }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: '',
      options: [
        { label: '选项1', value: '1' },
        { label: '选项2', value: '2' },
        { label: '选项3', value: '3' }
      ]
    };
  }
};
</script>

自定义样式

通过 CSS 为模拟的 Radio 按钮添加样式，使其看起来像传统的 Radio 按钮。

.radio-group {
  display: flex;
  gap: 10px;
}

.radio-item {
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.radio-item.active {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

使用原生 Radio 隐藏并自定义 UI

隐藏原生 Radio 按钮，通过 label 关联实现自定义 UI。

<template>
  <div class="custom-radio-group">
    <label 
      v-for="option in options" 
      :key="option.value"
      :class="{ 'active': selected === option.value }"
    >
      <input 
        type="radio" 
        :value="option.value" 
        v-model="selected"
        style="display: none"
      />
      {{ option.label }}
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: '',
      options: [
        { label: '选项1', value: '1' },
        { label: '选项2', value: '2' },
        { label: '选项3', value: '3' }
      ]
    };
  }
};
</script>

添加动画效果

通过 CSS 过渡或动画增强交互体验。

.custom-radio-group label {
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.custom-radio-group label.active {
  background-color: #007bff;
  color: white;
}

结合组件化

将模拟 Radio 封装为可复用的组件，便于在项目中多次使用。

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

<script>
export default {
  props: {
    options: {
      type: Array,
      required: true
    },
    modelValue: {
      type: [String, Number],
      required: true
    }
  },
  emits: ['update:modelValue']
};
</script>

<style>
.radio-container {
  display: flex;
  gap: 10px;
}

.radio-option {
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 20px;
  cursor: pointer;
  position: relative;
}

.radio-option.selected {
  border-color: #007bff;
}

.radio-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #007bff;
  border-radius: 50%;
  margin-right: 5px;
}
</style>