Vue: элемент слишком медленно реагирует на событие перетаскивания

У меня страница состоит в основном из двух частей: левого и правого столбца (гораздо большая площадь). Правый столбец содержит около 1500 строк (компонент), и каждая строка содержит 5 div в виде ячеек. Я использовал привязку события dragover к родительскому элементу этих двух столбцов. Каждый раз, когда запускается событие 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>

Вы упомянули, что у вас 1500 строк. Я не уверен, что это вызывает задержку рендеринга. 1500 - довольно много.

Ru Chern Chong 26.10.2018 06:03

Привет, Ру Черн Чонг, я думаю, ты прав. Оверлей отвечает тем быстрее, чем меньше количество строк, когда я тестировал, когда видел ваш комментарий. Так что теперь мне нужно подумать о том, как отображать мои строки.

ptree 26.10.2018 06:29

Если нужно, используйте бесконечную прокрутку

Ru Chern Chong 26.10.2018 06:29

Спасибо за совет. Я буду использовать разбиение на страницы, поскольку бесконечная прокрутка в этом случае не соответствует бизнес-логике.

ptree 26.10.2018 07:56

Оба работают. Всего наилучшего!

Ru Chern Chong 26.10.2018 07:58
1
5
812
1

Ответы 1

убрать функцию e.preventDefault();; это вызывает задержку

Другие вопросы по теме