vue实现图片单选

实现图片单选功能

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

基础实现方案

<template>
  <div class="image-picker">
    <div 
      v-for="(image, index) in images" 
      :key="index"
      class="image-option"
      :class="{ 'selected': selectedImage === image }"
      @click="selectedImage = image"
    >
      <img :src="image.url" :alt="image.alt">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedImage: null,
      images: [
        { url: 'image1.jpg', alt: 'Image 1' },
        { url: 'image2.jpg', alt: 'Image 2' },
        { url: 'image3.jpg', alt: 'Image 3' }
      ]
    }
  }
}
</script>

<style>
.image-picker {
  display: flex;
  gap: 10px;
}

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

.image-option.selected {
  border-color: #42b983;
}

.image-option img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}
</style>

使用组件封装方案

创建可复用的图片选择器组件：

<!-- ImagePicker.vue -->
<template>
  <div class="image-picker">
    <div 
      v-for="(item, index) in options"
      :key="index"
      class="image-option"
      :class="{ 'selected': modelValue === item.value }"
      @click="$emit('update:modelValue', item.value)"
    >
      <img :src="item.image" :alt="item.alt">
      <span v-if="item.label">{{ item.label }}</span>
    </div>
  </div>
</template>

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

父组件中使用：

<template>
  <ImagePicker 
    v-model="selectedImage" 
    :options="imageOptions" 
  />
</template>

<script>
import ImagePicker from './ImagePicker.vue'

export default {
  components: { ImagePicker },
  data() {
    return {
      selectedImage: null,
      imageOptions: [
        { value: 'opt1', image: 'image1.jpg', alt: 'Option 1', label: 'Option 1' },
        { value: 'opt2', image: 'image2.jpg', alt: 'Option 2', label: 'Option 2' }
      ]
    }
  }
}
</script>

增强交互效果

添加悬停效果和过渡动画：

.image-option {
  position: relative;
  border: 2px solid #eee;
  border-radius: 4px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.image-option:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.image-option.selected {
  border-color: #42b983;
  box-shadow: 0 4px 12px rgba(66, 185, 131, 0.3);
}

.image-option.selected::after {
  content: '✓';
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  background: #42b983;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

响应式布局处理

适应不同屏幕尺寸：

.image-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 15px;
  padding: 10px;
}

@media (max-width: 768px) {
  .image-picker {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
  }
}

以上方案提供了从基础到进阶的图片单选实现方式，可根据实际需求选择合适的方案并进行调整。组件化方案更适合在多个地方复用，而基础方案适合快速实现简单需求。