Question

我正在做我的第一个Vue项目。为此，我对板和卡具有拖放功能，可以将其拖放到板上。我想包括的一项功能是两个拖动选项：

将卡拖放到板上，然后将其放到那里，就像我们习惯->做一些功能
将卡拖放到板上，并将其悬停在板上很短时间->显示用于放置过程的一些其他选项，例如通过打开模式，显示列表或其他内容

到目前为止，第1个正在运行。为了使Number 2变得更容易，我想在第一步中开始切换div的显示。我的想法是在一开始就看不到它。当用户在拖动卡时在板上移动时，我想启动某种计时器。 假设我们将鼠标悬停2秒钟后，应该会显示额外的div 。 只要用户一直徘徊在那儿，它应该是可见的。只要用户放下卡片或将所拖动的元素从板上移开，它就会消失。计时器启动后，将其移离开发板即可重置它。

我已经尝试了一些可以在下面看到的东西。这是board vue组件的代码：

<template>
    <div
        :id="id"
        class="board"
        @dragenter.prevent
        @dragover.prevent
        @drop.prevent="drop"
        @dragenter="dragenter($event)"
        @dragover="dragover($event)"
        @dragleave="dragleave($event)"
    >
        <slot class="row"/>
        <div
        :id="`ui-details-${id}`"
        v-show="extendedHover">
        Long hover - Additional info shown here
        </div>
    </div>
</template>

<script>
export default {
  name: 'Devices',
  props: ['id', 'acceptsDrop'],
  data() {
    return {
      extendedHover: false,
      timer: null,
      totalTime: 3,
    };
  },
  methods: {
    drop(e) {
      this.$emit('dropped-layout', layoutId);
      clearInterval(this.timer);
      this.timer = null;
      this.totalTime = 3;
      e.target.classList.remove('hover-drag-over');
      this.extendedHover = false;
      this.$emit('dropped-component', cardId);
      e.target.classList.remove('hover-drag-over');
    },
    dragenter(e) {
      this.timer = setInterval(() => this.countdown(), 1000);
    },
    dragover(e) {
      if (this.acceptsDrop) {
        e.target.classList.add('hover-drag-over');
      }
    },
    dragleave(e) {
      if (this.acceptsDrop) {
        clearInterval(this.timer);
        this.timer = null;
        this.totalTime = 3;
        e.target.classList.remove('hover-drag-over');
        this.extendedHover = false;
      }
    },
    countdown() {
      this.totalTime -= 1;
      if (this.totalTime <= 0) {
        this.extendedHover = true;
      }
    },
  },
};
</script>

但是，效果不是很好。有时div会闪烁而不是永久显示，而且即使Dragleave应该停止了计时器，我也已经遇到了计时器仍在运行的问题。

这些问题从何而来？还是如何最好地实现这种功能？预先感谢

长时间悬停功能（或一段时间后如何触发div的显示？）

0 个答案: