用vue3 手写一个弹窗拖拽组件

好的，我可以帮你手写一个基于Vue3的弹窗拖拽组件示例代码。

首先，你需要安装Vue3:

npm install vue@next

然后，创建一个Draggable.vue组件，代码如下：

<template>
  <div class="draggable" :style="{ left: left + 'px', top: top + 'px' }">
    <div class="title" @mousedown="dragStart">
      {{ title }}
    </div>
    <div class="content">
      <slot />
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  props: {
    title: {
      type: String,
      default: '',
    },
  },
  setup(props, { emit }) {
    const left = ref(0);
    const top = ref(0);
    let startX, startY, offsetX, offsetY;

    function dragStart(e) {
      startX = e.clientX;
      startY = e.clientY;
      offsetX = left.value;
      offsetY = top.value;

      document.addEventListener('mousemove', drag);
      document.addEventListener('mouseup', dragEnd);
    }

    function drag(e) {
      const moveX = e.clientX - startX;
      const moveY = e.clientY - startY;
      left.value = offsetX + moveX;
      top.value = offsetY + moveY;
    }

    function dragEnd() {
      document.removeEventListener('mousemove', drag);
      document.removeEventListener('mouseup', dragEnd);
    }

    return {
      left,
      top,
      dragStart,
    };
  },
};
</script>

<style scoped>
.draggable {
  position: absolute;
  width: 300px;
  height: 200px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 5px #ccc;
}

.title {
  cursor: move;
  padding: 10px;
  background-color: #eee;
  border-bottom: 1px solid #ccc;
}

.content {
  padding: 10px;
}
</style>

在上面的代码中，我们使用了Vue3的Composition API来实现拖拽功能，使用了ref来定义left和top变量，使用了setup函数来定义组件逻辑。在dragStart函数中，我们记录了鼠标按下时的坐标和弹窗的偏移量，在drag函数中计算出弹窗的新位置，最后在dragEnd函数中移除了鼠标移动事件。

使用这个组件非常简单，只需要在父组件中引入Draggable组件，然后使用类似于普通的HTML标签的方式来使用它，例如：

<template>
  <div>
    <button @click="showDialog = true">打开弹窗</button>
    <draggable v-if="showDialog" title="弹窗标题">
      <p>这是弹窗内容</p>
      <button @click="showDialog = false">关闭弹窗</button>
    </draggable>
  </div>
</template>

<script>
import Draggable from './Draggable.vue';

export default {
  components: {
    Draggable,
  },
  data() {
    return {
      showDialog: false,
    };
  },
};
</script>

在上面的代码中，我们在父组件中引入了Draggable组件，并在父组件的data对象中定义了一个showDialog变量来控制弹窗的显示和隐藏。当点击打开弹窗按钮时，showDialog变量会被设置为true，从而显示弹窗；当点击弹窗内的关闭按钮时，showDialog变量会被设置为false，从而隐藏弹窗。

希望这个示例可以帮助你手写一个基于Vue3的弹窗拖拽组件！