(elementui-图片预览)el-dialog+el-image图片显示问题

项目场景:

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


问题描述

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


(elementui-图片预览)el-dialog+el-image图片显示问题_第1张图片


解决方案:

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

 组件代码:





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

修改页面

(elementui-图片预览)el-dialog+el-image图片显示问题_第2张图片

 
       
        

显示列表中点击变大

页面

(elementui-图片预览)el-dialog+el-image图片显示问题_第3张图片



           

小结

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

你可能感兴趣的:(vue,前端,vue.js,前端,javascript)