vue实现图片单选

实现图片单选功能

在Vue中实现图片单选功能可以通过v-model绑定选中状态，结合CSS样式控制选中效果。以下是一个完整的实现方案：

数据准备

定义图片列表数据，每个图片对象包含url和选中状态：

data() {
  return {
    images: [
      { id: 1, url: 'image1.jpg', selected: false },
      { id: 2, url: 'image2.jpg', selected: false },
      { id: 3, url: 'image3.jpg', selected: false }
    ],
    selectedImage: null
  }
}

模板渲染

使用v-for循环渲染图片，通过动态class绑定选中样式：

<div class="image-selector">
  <div 
    v-for="image in images" 
    :key="image.id"
    @click="selectImage(image)"
    :class="{ 'selected': image.selected }"
  >
    <img :src="image.url" alt="可选图片">
  </div>
</div>

选择逻辑

实现单选方法，确保每次只有一个图片被选中：

methods: {
  selectImage(image) {
    this.images.forEach(img => {
      img.selected = img.id === image.id
    })
    this.selectedImage = image
  }
}

样式设计

添加CSS样式突出显示选中状态：

.image-selector {
  display: flex;
  gap: 10px;
}

.image-selector div {
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.3s;
}

.image-selector div.selected {
  border-color: #42b983;
  box-shadow: 0 0 8px rgba(66, 185, 131, 0.5);
}

.image-selector img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

使用v-model的替代方案

如果需要更符合Vue的双向绑定模式，可以使用计算属性：

computed: {
  selectedImage: {
    get() {
      return this.images.find(img => img.selected)
    },
    set(newImage) {
      this.images.forEach(img => {
        img.selected = img.id === newImage.id
      })
    }
  }
}

组件化实现

对于复用场景，可以封装为独立组件：

Vue.component('image-selector', {
  props: ['images'],
  data() {
    return {
      internalImages: [...this.images]
    }
  },
  methods: {
    handleSelect(image) {
      this.internalImages = this.internalImages.map(img => ({
        ...img,
        selected: img.id === image.id
      }))
      this.$emit('input', image)
    }
  },
  template: `
    <div class="image-selector">
      <div v-for="img in internalImages" 
           :key="img.id"
           @click="handleSelect(img)"
           :class="{ selected: img.selected }">
        <img :src="img.url">
      </div>
    </div>
  `
})

使用时通过v-model绑定：

<image-selector v-model="selectedImage" :images="images" />

以上方案提供了从基础到进阶的实现方式，可根据实际需求选择适合的方法。核心思路是通过维护选中状态和点击事件处理来实现单选效果。