elementui el-image组件 点击预览图片

在Element UI中，el-image组件本身不提供点击预览的功能。但是，你可以使用Element UI的el-dialog组件来创建一个简单的图片预览对话框。以下是一个实现点击el-image组件后通过el-dialog预览图片的示例代码：

<template>
  <div>
    <!-- 循环显示多个图片 -->
    <el-image
      v-for="(src, index) in imageUrls"
      :key="index"
      :src="src"
      @click="previewImage(index)"
      style="margin-right: 10px; cursor: pointer;"
    ></el-image>
    
    <!-- 图片预览的对话框 -->
    <el-dialog :visible.sync="dialogVisible" title="图片预览">
      <img :src="currentImage" alt="图片预览" style="display: block; max-width: 100%; margin: 0 auto;">
    </el-dialog>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      imageUrls: [
        'http://example.com/image1.jpg',
        'http://example.com/image2.jpg',
        // ...更多图片URL
      ],
      currentImage: '', // 当前选中的图片URL
      dialogVisible: false, // 控制预览对话框的显示
    };
  },
  methods: {
    previewImage(index) {
      this.currentImage = this.imageUrls[index];
      this.dialogVisible = true;
    },
  },
};
</script>

在这个例子中，imageUrls数组包含了所有图片的URL。el-image组件通过循环渲染每个图片，并绑定了@click事件来触发previewImage方法。该方法将当前图片的索引作为参数，设置currentImage和dialogVisible的值，从而显示el-dialog对话框预览图片。