vue radio组件实现
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>使用自定义组件：
<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>关键点说明
- 数据绑定：使用
v-model实现双向绑定，简化状态管理。 - 组件化：通过封装自定义组件提高复用性，支持样式和逻辑定制。
- 第三方库：使用现成 UI 库（如 Element UI）可快速实现标准化交互。
