vue可移动窗口

如果你想创建一个可移动的窗口，可以使用 Vue.js 和一些 CSS。下面是一个基本的示例：

1. 在你的 Vue 组件中添加一个 `div` 元素，并设置它的样式为 `position: absolute` 和 `cursor: move`。

<template>
  <div class="movable-window" ref="window">
    <!-- your window content here -->
  </div>
</template>

<style>
.movable-window {
  position: absolute;
  cursor: move;
}
</style>

2. 在 `mounted` 钩子函数中，添加一个事件监听器，以便在用户按下鼠标左键时开始移动窗口。

<script>
export default {
  mounted() {
    const window = this.$refs.window;

    let isDragging = false;
    let prevX = 0;
    let prevY = 0;

    window.addEventListener('mousedown', (e) => {
      if (e.button !== 0) return;

      isDragging = true;
      prevX = e.clientX;
      prevY = e.clientY;

      e.stopPropagation();
      e.preventDefault();
    });

    window.addEventListener('mousemove', (e) => {
      if (!isDragging) return;

      const deltaX = e.clientX - prevX;
      const deltaY = e.clientY - prevY;
      prevX = e.clientX;
      prevY = e.clientY;

      window.style.left = window.offsetLeft + deltaX + 'px';
      window.style.top = window.offsetTop + deltaY + 'px';

      e.stopPropagation();
      e.preventDefault();
    });

    window.addEventListener('mouseup', (e) => {
      isDragging = false;

      e.stopPropagation();
      e.preventDefault();
    });
  }
};
</script>

这样，你就可以创建一个可移动的窗口了。当用户按下鼠标左键并拖动窗口时，窗口会相应地移动。