到底是什麼問題?
沒錯就是這樣,就像上圖一樣,上傳完圖片需要預覽時,圖片被蒙層遮罩住了。
下面是整個組件的代碼:圖片上傳、預覽、刪除,組件方法可以直接去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"
即可破解!