javascript - Vue : Element responses too slow to dragover event

Question

我的页面基本上有两个部分:左栏和右栏(更大的区域)。右列包含大约 1500 行(组件)，每行包含 5 个 div 作为单元格。我曾经将dragover事件绑定(bind)在这两列的父元素上。每次触发 Dragover 事件时，都会出现一个覆盖 div 并覆盖整个窗口区域。下面的例子:

Javascript

let row = {
    props: ['item'],
    template: `<div class="row">
                   <div class="cell">{{item.value1}}</div>
                   <div class="cell">{{item.value2}}</div>
                   <div class="cell">{{item.value3}}</div>
                   <div class="cell">{{item.value4}}</div>
                   <div class="cell">{{item.value5}}</div>
               </div>
};

new Vue({
    el: '#parent',
    components: {
        'row': row
    },
    template: `<div id="parent" @dragover="showOverlay">
                   <!-- display if this.overlay == true, otherwise hide -->
                   <div class="overlay" v-show="overlay"></div>

                   <div class="left-column">Drag a file and drop</div>
                   <div class="right-column">
                       <row :rows="rows" v-for="item in rows"></row>
                   </div>
               </div>`,
    data: {
        rows: [...],
        overlay: false
    },
    methods: {
        showOverlay(e) {
            e.preventDefault();
            this.overlay = true;
        }
    }
});

代码运行正常，但滚动列表有点滞后。但是，当我将文件拖到右列区域时，需要几秒钟才能显示叠加层，而拖到左列只需要不到一秒的时间。

HTML

<div id="parent"></div>

Answer 1

删除e.preventDefault();函数；这导致了延迟