前端利用插件实现图片预览功能（v-viewer）

1、下载依赖
 

npm下载

npm install v-viewer

yarn下载

yarn v-viewer

v-viewer版本：3.0.1

2、html代码
 

      <!-- 文件预览 -->
  <el-dialog v-model="imgDialogVisible" title="预览文件" >
 <el-scrollbar max-height="75vh">
     <div  class="img-viewer" v-viewer="{ movable: false, zIndex: 5000 }">
   <div class="img-item" v-for="(item, index) in imgAry" :key="index">
      <el-image style="width:100%;height:100%;" :src="item.filePath" alt="Preview Image"  ></el-image> 
        <div class="model">
          <i class="el-icon-zoom-in" @click="show(index)"></i>
          <i class="el-icon-delete" style="margin-left: 14px" @click="removeImage(item.id)"></i>
        </div>
      </div>
    </div>
 </el-scrollbar>
  </el-dialog>

3、js代码
 

    // 预览放大
   show(index) {
      const viewer = this.$el.querySelector('.img-viewer').$viewer
      viewer.view(index)
    },
        //删除
    removeImage(id) {
      this.$confirm("此操作将永久删除所选数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
      // /jmis-evaluation/deEvaluateUserFile
        .then(() => {
          let ids = [];
            ids.push(id);
          this.$API.taskcapabilityevaluate.deEvaluateIndexSystem
            .delDeEvaluateUserFile(ids)
            .then((res) => {
              if (res.code === 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.viewsFile();
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

4、完整代码
 

<template>
      <!-- 文件预览 -->
  <el-dialog v-model="imgDialogVisible" title="预览文件" >
 <el-scrollbar max-height="75vh">
     <div  class="img-viewer" v-viewer="{ movable: false, zIndex: 5000 }">
   <div class="img-item" v-for="(item, index) in imgAry" :key="index">
      <el-image style="width:100%;height:100%;" :src="item.filePath" alt="Preview Image"  ></el-image> 
        <div class="model">
          <i class="el-icon-zoom-in" @click="show(index)"></i>
          <i class="el-icon-delete" style="margin-left: 14px" @click="removeImage(item.id)"></i>
        </div>
      </div>
    </div>
 </el-scrollbar>
  </el-dialog>
</template>

<script>
import { directive as viewer } from 'v-viewer'

export default {
    data() {
    return {
}
},
methods:{
        // 预览文件
    viewsFile(){
      this.imgAry=[]
      let param={
        userId:this.zjVal,
        taskId:this.weightData.id,
        
      }
      this.apiObj.getByUserIdAndTaskId(param,{type:0}).then(res=>{
      
        if( res.data.length>0){
          this.imgDialogVisible=true
        res.data.forEach(item=> {
        let imgUrl={
          filePath:`http://192.168.12.216:9000/jmis-cloud/${item.filePath}`,
          id:item.id
        }
        this.imgAry.push(imgUrl)

        })
        }else{
          this.$message.warning('该专家未绑定文件')
        }
        
      })
      

    },
    // 预览放大
   show(index) {
      const viewer = this.$el.querySelector('.img-viewer').$viewer
      viewer.view(index)
    },
        //删除
    removeImage(id) {
      this.$confirm("此操作将永久删除所选数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
      // /jmis-evaluation/deEvaluateUserFile
        .then(() => {
          let ids = [];
            ids.push(id);
          this.$API.taskcapabilityevaluate.deEvaluateIndexSystem
            .delDeEvaluateUserFile(ids)
            .then((res) => {
              if (res.code === 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.viewsFile();
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
}
 }

注意：

   show(index) {
      const viewer = this.$el.querySelector('.img-viewer').$viewer
      viewer.view(index)
    },
这块class是唯一，如果预览不成功，看是不是没有获取到当前的dom元素
获取写成：
  show(index) {
      const viewer = document.getElementById(img-viewer).$viewer
      viewer.view(index)
    },

效果如下：

最后 感谢阅读 如果有不足之处 请指出