使用vue+element ui图片放大预览遮盖层异常

使用element一个图片放大预览遮盖层只挡了一部分,如图 错误代码

<el-image
                style="width: 100px; height: 100px"
                :src="http://localhost:9090/file/+scope.row.jlHeadurl"
                :preview-src-list="[http://localhost:9090/file/+scope.row.jlHeadurl]"
                fit="cover"
            >

正确代码

<el-image
                style="width: 100px; height: 100px"
                :src="http://localhost:9090/file/+scope.row.jlHeadurl"
                :preview-src-list="[http://localhost:9090/file/+scope.row.jlHeadurl]"
                fit="cover"
                append-to-body
            >

原因:做项目中遇到两次弹出框遮罩层的问题。有嵌套的 弹出框。表单是一层弹框,然后图片放大是一层弹框,两层弹框同时出现就会出现上面面问题 如果你是简单的打开弹出框之后有一层遮罩的话,用下边这个就行。 如果打开弹出框有多个遮罩的话。就换这个方法。 表单与图片放大已经算多层了,所以要用这个

经验分享 程序员 微信小程序 职场和发展