思路：圖片設定z-index為最底部，再添加一個div模板設定為z-index: 999 這樣拖拽檔案會觸發新建的div，然后在drop事件修改圖片的dom
<el-image
:src="URL"
v-if="isShowImg"
style="width: 770px; height: 433px"
:preview-src-list="[URL]"
>
<div id="dragDropDiv" ref="allimg"></div>
mounted() {
setTimeout(() => {
var that = this;
let allimg = document.getElementById("dragDropDiv");
allimg.ondragenter =
allimg.ondragover =
allimg.ondragleave =
function () {
// 阻止默認事件
return false;
};
//釋放檔案
allimg.addEventListener("drop", that.onDrop);
}, 0);
},
methods: {
onDrop(e) {
var that = this;
let ev = window.event || e;
ev.preventDefault();
this.imgSaveToUrl(e.dataTransfer.files[0],1,true) //替換圖片標簽鏈接
},
}
<style>
.el-upload-dragger {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border: none !important;
z-index: 999 !important;
}
</style>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/298127.html
標籤：其他
下一篇：2021-09-06