vue可移动窗口

Vue中实现可移动窗口可以使用拖拽事件和CSS样式来实现。以下是一个简单的示例：

1. 在模板中添加一个可移动的窗口组件，设置其初始位置和样式。

<template>
  <div class="window" :style="{ top: top + 'px', left: left + 'px' }" @mousedown="dragStart">
    <h3>可移动窗口</h3>
    <button @click="closeWindow">关闭</button>
    <p>这是一个可移动的窗口组件</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      top: 100,
      left: 100,
      startX: 0,
      startY: 0,
    };
  },
  methods: {
    dragStart(e) {
      // 记录鼠标按下时的坐标
      this.startX = e.clientX - this.left;
      this.startY = e.clientY - this.top;
      // 绑定鼠标移动和松开事件
      document.addEventListener('mousemove', this.dragMove);
      document.addEventListener('mouseup', this.dragEnd);
    },
    dragMove(e) {
      // 计算窗口的新位置
      this.left = e.clientX - this.startX;
      this.top = e.clientY - this.startY;
    },
    dragEnd() {
      // 解绑鼠标移动和松开事件
      document.removeEventListener('mousemove', this.dragMove);
      document.removeEventListener('mouseup', this.dragEnd);
    },
    closeWindow() {
      // 关闭窗口
      this.$emit('close');
    },
  },
};
</script>

<style>
.window {
  position: absolute;
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: move;
}
</style>

2. 在父组件中使用该可移动窗口组件，并监听其关闭事件。

<template>
  <div>
    <h1>Vue可移动窗口示例</h1>
    <MovableWindow @close="hideWindow" />
    <button @click="showWindow">打开窗口</button>
  </div>
</template>

<script>
import MovableWindow from './MovableWindow';

export default {
  components: {
    MovableWindow,
  },
  methods: {
    showWindow() {
      // 显示窗口
      this.$refs.window.style.display = 'block';
    },
    hideWindow() {
      // 隐藏窗口
      this.$refs.window.style.display = 'none';
    },
  },
};
</script>

这样就可以在Vue中实现一个简单的可移动窗口了。