点击文字预览图片

需求如下图

具体操作：

 //HTML部分
<div
   class="img-item"
   v-for="url in activity?.attachs"
   :key="url?.fileId"
   @click="handleChangePath(activity?.attachs)"
  >
   <span :title="url?.fileName">{{ url?.fileName }}</span>
 </div>
 <el-image-viewer v-if="showImagePreview" :zoom-rate="1.2" @close="closePreview" :url-list="imgList" />



//js部分
//注意：我这是用vue3框架写的，其他框架注意修改部分代码
const imgList = ref<string[]>([]);
const showImagePreview = ref(false);
const handleChangePath = (rows: any) => {
//无论你获取的数据是什么样的，只要你把完整图片路径放到imgList里面即可
  rows.forEach(item => {
    if (item.fileType == "jpg" || item.fileType == "png") {
      imgList.value.push(item.filePath);
    }
  });
  showImagePreview.value = true;
};
const closePreview = () => {
  imgList.value = [];
  showImagePreview.value = false;
};