vue 实现图片单选
实现图片单选功能
在Vue中实现图片单选功能，可以通过自定义单选按钮样式结合图片展示来实现。以下是具体实现方法：
使用v-model绑定单选值
创建一个数据属性来存储当前选中的图片ID，使用v-model绑定到单选按钮组：
data() {
return {
selectedImage: null,
images: [
{ id: 1, url: 'image1.jpg' },
{ id: 2, url: 'image2.jpg' },
{ id: 3, url: 'image3.jpg' }
]
}
}创建图片单选组件
在模板中使用v-for渲染图片列表，每个图片项绑定点击事件：
<div class="image-radio-group">
<div
v-for="image in images"
:key="image.id"
class="image-radio-item"
:class="{ 'selected': selectedImage === image.id }"
@click="selectedImage = image.id"
>
<img :src="image.url" :alt="'Image ' + image.id">
</div>
</div>添加样式增强交互
为选中的图片添加视觉反馈：
.image-radio-group {
display: flex;
gap: 10px;
}
.image-radio-item {
cursor: pointer;
border: 2px solid transparent;
transition: all 0.3s ease;
}
.image-radio-item.selected {
border-color: #42b983;
box-shadow: 0 0 8px rgba(66, 185, 131, 0.5);
}
.image-radio-item img {
width: 100px;
height: 100px;
object-fit: cover;
}使用原生单选按钮（无障碍）
如果需要更好的无障碍支持，可以结合隐藏的原生单选按钮：
<div class="image-radio-group">
<label
v-for="image in images"
:key="image.id"
class="image-radio-item"
:class="{ 'selected': selectedImage === image.id }"
>
<input
type="radio"
v-model="selectedImage"
:value="image.id"
style="display: none"
>
<img :src="image.url" :alt="'Image ' + image.id">
</label>
</div>处理初始选中状态
如果需要默认选中某个图片，可以在data中设置初始值：
data() {
return {
selectedImage: 1, // 默认选中ID为1的图片
images: [...]
}
}响应选中变化
如果需要响应选中变化，可以添加watch：
watch: {
selectedImage(newVal) {
console.log('Selected image changed to:', newVal)
// 执行其他逻辑
}
}以上方法提供了灵活的实现方式，可以根据具体需求选择适合的方案。样式部分可以根据项目设计系统进行调整，核心逻辑是维护一个响应式的选中状态变量并通过点击事件更新它。
