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)
    // 执行其他逻辑
  }
}

以上方法提供了灵活的实现方式，可以根据具体需求选择适合的方案。样式部分可以根据项目设计系统进行调整，核心逻辑是维护一个响应式的选中状态变量并通过点击事件更新它。