elementui相册

ElementUI 相册功能实现

ElementUI 本身并未提供专门的相册组件，但可以通过 el-image 结合其他组件（如 el-dialog、el-carousel）实现类似效果。以下是两种常见的实现方式：

基础图片预览

使用 el-image 的预览功能，适合单张图片的展示与缩放：

<template>
  <el-image 
    :src="imageUrl" 
    :preview-src-list="[imageUrl]"
    fit="cover">
  </el-image>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg'
    }
  }
}
</script>

多图相册展示

结合 el-row 和 el-col 实现网格布局，点击后通过 el-dialog 展示大图：

<template>
  <div>
    <el-row :gutter="10">
      <el-col 
        v-for="(item, index) in imageList" 
        :key="index" 
        :xs="8" 
        :sm="6" 
        :md="4">
        <el-image 
          :src="item.thumb" 
          @click="openGallery(index)"
          style="cursor: pointer">
        </el-image>
      </el-col>
    </el-row>

    <el-dialog 
      :visible.sync="dialogVisible" 
      width="80%">
      <img :src="currentImage" style="width: 100%">
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageList: [
        { thumb: 'thumb1.jpg', full: 'full1.jpg' },
        { thumb: 'thumb2.jpg', full: 'full2.jpg' }
      ],
      dialogVisible: false,
      currentImage: ''
    }
  },
  methods: {
    openGallery(index) {
      this.currentImage = this.imageList[index].full;
      this.dialogVisible = true;
    }
  }
}
</script>

轮播图相册

使用 el-carousel 实现自动轮播效果：

<template>
  <el-carousel :interval="3000" height="400px">
    <el-carousel-item v-for="item in images" :key="item">
      <el-image :src="item" fit="fill"></el-image>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  data() {
    return {
      images: [
        'image1.jpg',
        'image2.jpg',
        'image3.jpg'
      ]
    }
  }
}
</script>

样式优化建议

1. 为缩略图添加悬停效果：

   .el-image:hover {
   transform: scale(1.03);
   transition: transform 0.3s;
   box-shadow: 0 2px 12px rgba(0,0,0,0.1);
   }

2. 对话框添加关闭按钮样式：

   .el-dialog__headerbtn {
   font-size: 20px;
   color: #999;
   }

注意事项

• 大图加载可能需要优化，建议使用懒加载技术
• 移动端需考虑手势滑动浏览功能
• 图片路径建议使用绝对URL或配置正确的静态资源路径