javascript - 从事件中获取 vue 组件

Question

我正在我的应用程序中构建拖放功能，拖放区域如下所示:

<template>
  <div class="layers-panel" @dragover="onDragOver" @drop="onDragDrop">
    <layer
      v-for="(layer, index) in layers"
      :key="layer.name"
      :info="layer"
      :offset="index"
      ref="layer"
    ></layer>
  </div>
</template>

然后可拖动的项目看起来像这样:

<template>
  <div class="layer" draggable="true" @dragstart="onDragStart">
    <!-- Content of draggable element -->
  </div>
</template>

在我的拖动事件中，我想获取元素相关的当前组件，所以当我将一个项目拖动到 <div class="layer"...> 上时element 我想得到那个组件。我不确定如何访问它，因为一个事件被传递给了 @dragover="onDragOver"事件只允许我访问 html 元素而不是 Vue 组件。

这就是我现在的dragover事件看起来像:

    public onDragOver(evt: DragEvent) {
      evt.preventDefault()
      if (!evt.target) return
      let layer = (evt.target as HTMLElement).closest('.layer') as HTMLElement
    }

如何获取该元素所属的组件？

Answer 1

Vue 当然可以让你 access a component instance但是我认为没有必要实现您的实际目标:通过拖放重新排序组件。

拖放意味着我们受限于 DragEvent 提供的内容:

• 我们可以访问 target element例如被拖放的元素
• 我们可以通过DataTransfer设置任意数据

您无法确定元素的放置位置，因为您放置的元素包含所有层。相反，如果每一层都是一个放置元素，那么您可以通过 dragover 确定它是哪一层。通过 event.target。

我们还需要确定哪个元素对应于我们正在拖放的 layers 数组。这可以通过将每个 layer 的索引绑定(bind)为一个属性来实现，这样我们就可以通过 event.target 访问它。

为简单起见，我将使用 id 属性，以便稍后可以通过 event.target.id 访问它:

<div
  v-for="(layer, idx) in layers"
  :key="idx"
  :id="idx"
  draggable="true"
  @dragstart="dragstart"
>
  <div
    :id="idx"
    class="draggable"
    @dragover="dragover"
    @drop="drop"
  >
    {{ layer }}
  </div>
</div>

请注意，我将相同的索引绑定(bind)到 id，以便我可以正确识别目标层。

我们还需要确保我们可以识别被拖动的元素，因为在 drop 上我们将仅通过 event.target 放置元素。我们可以通过在第一次开始拖动时在 DataTransfer 中设置数据来做到这一点:

dragstart(event) {
  event.dataTransfer.setData("selectedIdx", event.target.id);
},

现在在 drop 上，我们可以访问两者并可以根据需要操作 layers:

drop(event) {
  var selectedIdx = event.dataTransfer.getData("selectedIdx");
  var targetIdx = event.target.id;
  var selected = this.layers.splice(selectedIdx, 1)[0];
  this.layers.splice(targetIdx, 0, selected);
},

Example codepen