Vue.js 中实现多个弹出框的自由移动

2023-10-08 03:43:21

Vue.js 中实现同时弹出多个 div 并移动弹框位置

在 Vue.js 中，您可以同时弹出多个 div 并移动它们的弹出框位置，以便进行详情数据的对比查看。本教程将向您展示如何实现此操作。

步骤 1：创建 Vue 实例

首先，您需要创建一个 Vue 实例。您可以使用以下代码创建一个 Vue 实例：

const app = new Vue({
  el: '#app',
  data: {
    divs: []
  }
});

步骤 2：创建 div 组件

接下来，您需要创建一个 div 组件。您可以使用以下代码创建一个 div 组件：

Vue.component('my-div', {
  template: '<div class="my-div"></div>'
});

步骤 3：在 Vue 实例中添加 div 组件

现在，您可以在 Vue 实例中添加 div 组件。您可以使用以下代码在 Vue 实例中添加 div 组件：

app.divs.push({
  id: 1,
  content: 'Div 1'
});

app.divs.push({
  id: 2,
  content: 'Div 2'
});

app.divs.push({
  id: 3,
  content: 'Div 3'
});

步骤 4：在 div 组件中添加移动功能

现在，您需要在 div 组件中添加移动功能。您可以使用以下代码在 div 组件中添加移动功能：

methods: {
  moveDiv(event) {
    const div = event.target;
    const rect = div.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;

    div.style.left = `${x}px`;
    div.style.top = `${y}px`;
  }
}

步骤 5：在 Vue 实例中添加事件监听器

现在，您需要在 Vue 实例中添加事件监听器，以便在 div 组件被点击时移动 div 组件。您可以使用以下代码在 Vue 实例中添加事件监听器：

mounted() {
  const divs = document.querySelectorAll('.my-div');
  divs.forEach((div) => {
    div.addEventListener('mousedown', this.moveDiv);
  });
}