elementui ui对el-image-viewer的简单封装及使用

在项目中，会有对图片预览查看的需求。当使用el-dialog进行图片预览实现时，会出现长图片占满整个浏览器，致使图片不能完整的显示的情况,这对使用者的体验非常不友好，使用elementui提供的el-image-viewer就能解决这个问题。

一，封装el-image-viewer组件

<template>
  <div>
    <el-image
    v-if="srcUrl"
    style="width: 160px; height: 116px"
    :src="srcUrl"
    :style=styleC
    @click="onPreview(srcUrl)"
    >
    <div slot="error" class="image-slot">
      <i class="el-icon-picture-outline"></i>
    </div>
  </el-image>
    <el-image-viewer 
      v-if="showViewer" 
      :on-close="closeViewer" 
      :url-list="[showViewerUrl]"
      :zIndex="zIndex"
      />
  </div>
 
</template>
 
<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
export default {
  components: {
     ElImageViewer,
    },
    data() {
    return {
      showViewer: false, // 显示查看器
      showViewerUrl:"",
    }
  },
  name: 'KtButton',
  props: {
    srcUrl: {  // 图片链接
      type: String,
      default: null
    },
    styleC: {  // 图片链接，可不填
      type: String,
      default: null
    },
    zIndex: {//使预览图片置于浏览器最外层
      type: Number,
      default: 9999
    }
  },
  computed: {
 
  },
  methods: {
    // 关闭查看器
        closeViewer() {
          this.showViewer = false
        },
      //打开查看器
     onPreview(showViewerUrl) {
            this.showViewerUrl = showViewerUrl;
            this.showViewer = true
        },
   
  }
};
</script>复制

二，使用组件

1.注册组件

import customImg from "@/components/CustomImg"
 export default{
  components:{
    customImg
  },复制

2.使用组件

                                <el-carousel-item v-if="v.fileList && v.fileList.length>0"  v-for="(item,index) in v.fileList" trigger="click">
                                        <!-- <el-image v-if="item.type==0" style="margin-left:40px;cursor:pointer" class="imgUPload_" :src="baseImgURL+item.url" @click.native="previewImgCard(baseImgURL+item.url)"  >
                                          <div slot="error" class="image-slot">
                                            <i class="el-icon-picture-outline"></i>
                                          </div>
                                        </el-image> -->
//在这里使用组件，srcUrl传入需要预览的url地址
                                        <customImg :srcUrl="baseImgURL+item.url"  v-if="item.type==0" style="margin-left:40px;cursor:pointer" class="imgUPload_"> </customImg>
                                  <video v-if="item.type == 1" style="margin-left:40px" width="200px"  controls  :autoplay="false" :src="baseImgURL+item.url"></video>
                                  <audio v-if="item.type == 2"  style="width:200px;margin-left:40px" controls :autoplay="false" :src="baseImgURL+item.url" ></audio>
                                </el-carousel-item>
                              </el-carousel>复制

三，效果展示

好了，一个简单的图片预览效果就出现了。