当前位置：首页 > VUE

vue实现图片单选

2026-03-28 11:13:28VUE

实现图片单选功能

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

模板部分

<template>
  <div class="image-radio-group">
    <div 
      v-for="(item, index) in images" 
      :key="index"
      class="image-option"
      :class="{ 'selected': selectedIndex === index }"
      @click="selectImage(index)"
    >
      <img :src="item.url" :alt="item.name">
      <p>{{ item.name }}</p>
    </div>
  </div>
</template>

脚本部分

<script>
export default {
  data() {
    return {
      selectedIndex: null,
      images: [
        { url: 'path/to/image1.jpg', name: '选项1' },
        { url: 'path/to/image2.jpg', name: '选项2' },
        { url: 'path/to/image3.jpg', name: '选项3' }
      ]
    }
  },
  methods: {
    selectImage(index) {
      this.selectedIndex = index
    }
  }
}
</script>

样式部分

<style scoped>
.image-radio-group {
  display: flex;
  gap: 20px;
}

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

.image-option.selected {
  border-color: #409eff;
  box-shadow: 0 0 8px rgba(64, 158, 255, 0.3);
}

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

使用v-model实现双向绑定

如果需要将选中值暴露给父组件，可以使用v-model：

子组件

<script>
export default {
  props: ['value'],
  data() {
    return {
      images: [
        { id: 1, url: 'path/to/image1.jpg', name: '选项1' },
        { id: 2, url: 'path/to/image2.jpg', name: '选项2' }
      ]
    }
  },
  computed: {
    selectedId: {
      get() { return this.value },
      set(val) { this.$emit('input', val) }
    }
  }
}
</script>

父组件使用

<image-radio v-model="selectedImageId"></image-radio>

使用第三方组件库

如果使用Element UI等组件库，可以利用现成的单选组件：

vue实现图片单选

<el-radio-group v-model="selectedImage">
  <el-radio 
    v-for="item in images" 
    :key="item.id" 
    :label="item.id"
  >
    <img :src="item.url" class="radio-image">
  </el-radio>
</el-radio-group>

以上方法都能实现图片单选功能，选择哪种方式取决于项目需求和使用的技术栈。自定义实现方式灵活性更高，而使用组件库可以快速实现标准化样式。