（elementui-图片预览）el-dialog+el-image图片显示问题

项目场景：

有一个修改的页面，这个页面有个预览按钮。其实点击图片使用v-viewer已经实现了预览的功能了。现在做的是另一套方案，el-image中预览图片。

问题描述

当el-dialog+el-image是直接写在addOrupdate.vue中，发现预览图片过高过宽总是出现预览不全的效果，改的时候加滚动条显示滚动条也老是加的有问题，或去修改各种样式调试也总是有显示问题。要么宽>高的图片显示不正常，要么高>宽的显示不正常，没有同时显示好。

解决方案：

将el-dialog+el-image抽成一个组件后，addOrupdate.vue去引入这个组件，再去预览就不会有问题。图片太高了会有自动的滚动条去滑动。

 组件代码：

<template>

       <el-dialog  title="图片预览" :visible.sync="imgReview" :append-to-body="true"  width="50%"  >
			<el-image class="imgReview" :src="imgUrl" :fit="fit"  :preview-src-list="images" ></el-image>
			<span slot="footer" class="dialog-footer">
			  <el-button type="warning" @click="imgReview = false">取消</el-button>
			  <el-button type="primary" @click="imgReview = false" >确定</el-button>
			</span>
       </el-dialog>
</template>


<script>
export default {
  data() {
    return {
      fit: "fill",//scale-down
      imgUrl:'',
      images: [],
      imgReview:false,
     
    };
  },
  methods: {
    init() {
        this.imgReview = true;
       if( sessionStorage.getItem("imgUrl")){
        this.imgUrl = sessionStorage.getItem("imgUrl");
        this.images.push(sessionStorage.getItem("imgUrl"));
       }
    },
    
  },
 
};
</script>
<style>
.imgReview{
    width: 60%;
    height: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>

再记一个v-viewer点击小图预览大图

修改页面

 <el-form-item label="图片" prop="imgUrl" v-show="dataForm.imgUrl != ''">
       <!-- 达到预览大图的效果-->
        <div v-viewer>
          <img
            :src="dataForm.imgUrl"
            style="height: 70px; width: 70px; cursor: pointer;z-index:9999;"
          />
        </div>
</el-form-item>

显示列表中点击变大

页面

<el-table-column prop="imgUrl" label="图片" width="150">

           <template slot-scope="scope">
              <viewer>
                <img
                  :src="scope.row.imgUrl"
                  style="height: 70px; width: 70px;cursor:pointer " >
              </viewer>
          </template>

</el-table-column>

 还写过点击弹窗，再点击的

<el-table-column prop="imgUrl" label="图片" width="150" align="center" header-align="center">
 
           <template slot-scope="scope">
               
                <img v-if="scope.row.imgUrl" :src="scope.row.imgUrl" width="80" height="50" @click="showImg(scope.row)">
                <span v-else>暂无图片</span>
              
          </template>
 
</el-table-column>



<el-dialog :visible.sync="showImage"  :title="imgTitle" width="40%">
    <div style="width:80%;height:80%;justify-content:center;align-items:center;text-align:center;display:flex;">
        <div v-viewer>
            <img :src="image" style="height:155px;width:205px;">
        </div>

    </div>

</el-dialog>



// js部分

showImg(rowObj){
    this.showImage = true;//预览弹窗
    this.image = rowObj.imgUrl;
    this.imgTitle = rowObj.title
}

小结

开发过程中还是能使用组件就使用组件吧，以后不偷懒直接写在一个页面了。o(╥﹏╥)o