從事件中獲取 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"...>元素上時，我想獲取該組件。 我不確定如何訪問它，因為一個事件被傳遞給@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 當然允許您訪問組件實例，但我認為沒有必要達到您的實際目標：通過拖放重新排序組件。

拖放意味着我們受到DragEvent提供的限制：

• 我們可以訪問 目標元素，例如被拖放的元素
• 我們可以通過DataTransfer設置任意數據

您無法確定元素的放置位置，因為您的放置元素包含所有圖層。 相反，如果每一層都是一個放置元素，那么您可以通過dragover的event.target來確定它是哪一個。

我們還需要確定與我們正在拖放的layers數組對應的元素。 這可以通過將每layer的索引綁定為一個屬性來實現，這樣我們就可以通過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>

注意我將相同的索引綁定到 id 以便我可以正確識別目標層。

我們還需要確保我們可以識別被拖動的元素，因為在drop時我們只會通過event.target獲得放置元素。 我們可以通過在第一次開始拖動時在DataTransfer中設置數據來做到這一點：

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

現在，在放置時，我們可以訪問兩者，並且可以根據需要操作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);
},

示例代碼筆