Electron软件安装后如果用户拖拽文件或者图片到软件里面,会打开此文件,但是不能够关闭,因此导致体验不佳。
因此可以禁用全局的拖拽事件来阻止这个行为。
一、在util文件夹里面新建一个文件。
export default {
mounted() {
this.disableDragEvent();
},
methods: {
disableDragEvent() {
// 当拖动的元素或选择文本输入有效的放置目标时,会触发此事件。
window.addEventListener('dragenter', this.disableDrag);
// 当将元素或文本选择拖动到有效放置目标(每几百毫秒)上时,会触发此事件。
window.addEventListener('dragover', this.disableDrag);
// 当在有效放置目标上放置元素或选择文本时触发此事件。
window.addEventListener('drop', this.disableDrag);
},
//目前版本暂无使用可拖拽的上传区
disableDrag(e) {
// const dropzone = document.getElementById('upload-area') // 这个是可拖拽的上传区
// if (dropzone === null || !dropzone.contains(e.target)) {
e.preventDefault();
//属性指定拖放操作所允许的一个效果。copy 操作用于指示被拖动的数据将从当前位置复制到放置位置。
// move操作用于指定被拖动的数据将被移动。 link操作用于指示将在源和放置位置之间创建某种形式的关系或连接。
e.dataTransfer.effectAllowed = 'none';
// 属性控制在拖放操作中给用户的反馈(通常是视觉上的)。它会影响在拖拽过程中光标的手势。
e.dataTransfer.dropEffect = 'none';
},
},
beforeDestroy() {
window.removeEventListener('dragenter', this.disableDrag);
window.removeEventListener('dragover', this.disableDrag);
window.removeEventListener('drop', this.disableDrag);
},
};
dataTransfer.dropEffect
dropEffect属性控制在拖放操作中显示的鼠标图标。dropEffect需要配合effectAllowed一起使用。
copy:
move:
link:
none:
dataTransfer.effectAllowed
dataTransfer.effectAllowed属性指定拖放操作所允许的一个效果。
copy:操作用于指示被拖动的数据将从当前位置复制到放置位置。
move:操作用于指定被拖动的数据将被移动。
link:操作用于指示将在源和放置位置之间创建某种形式的关系或连接。
二、新建的文件通过vue混入(mixin)的形式混入到app.vue中即可。