项目场景:
有一个修改的页面,这个页面有个预览按钮。其实点击图片使用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