到底是什么问题?
没错就是这样,就像上图一样,上传完图片需要预览时,图片被蒙层遮罩住了。
下面是整个组件的代码:图片上传、预览、删除,组件方法可以直接去Element-ui官方文档查看。
<template v-slot:img_upload>
<el-upload
action="#"
list-type="picture-card"
:limit="9"
:auto-upload="false"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog
:visible.sync="dialogVisible"
:modal-append-to-body="false"
>
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
</template>
methods: {
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
handleRemove(file, fileList) {
console.log(file, fileList)
}
}
点解?
给el-dialog
添加属性:modal-append-to-body="false"
即可破解!