vue实现图片预览功能

图片预览 点击放大缩小旋转 切换上下张图片

1. 首先自己定义共用的一个组件
   

2. ViewImg.vue

<template>
  <div>
    <el-image-viewer
      v-if="isShow"
      :on-close="ViewerClose"
      :url-list="imgPathList"
    ></el-image-viewer>
  </div>
</template>

<script>
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
export default {
  components: {
    ElImageViewer,
  },
  props: {
    imgPathList: {
      type: Array,
      default() {
        return [];
      },
    },
    isShow: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {};
  },
  methods: {
    // 关闭弹窗
    ViewerClose() {
      this.$emit("update:isShow", false);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-icon-circle-close:before {
  color: #fff;
}
</style>

3 在页面使用

       <img
            style="width:60px;height:60px;"
            :src="imagePath"
            alt=""
            @click="imgShowClick(imagePath，imagePathList)"
          />

imagePath 是用来显示的图片 imagePathList 是可能存在的图片列表

4 在页面的根目录引入组件

  <!-- 图片预览组件 -->
    <ViewImg :img-path-list="imgPathList" :is-show.sync="isShow" />

5 在页面的data中定义字段用来存储路径地址

data() {
    return {
      isShow: false,
      imgPathList: [], // 预览图片的地址
    };
  },

6 写图片预览方法

    imgShowClick(imgSrc, imgList) {
      const imgListFlag = imgList instanceof Array && imgList.length;
      if (imgSrc) {
        if (imgListFlag) {
          this.imgPathList = imgList;
        } else {
          this.imgPathList = [];
          this.imgPathList.push(imgSrc);
        }
        this.isShow = true;
      } else if (imgListFlag) {
        this.imgPathList = imgList;
        this.isShow = true;
      } else {
        this.$message.info("当前没有可预览的图片");
      }
    },