用vue3写一个拖拽弹窗组件

好的，我可以帮你解答这个问题。

首先，我们需要安装 `vue-draggable-resizable` 这个库，它可以帮助我们实现拖拽和调整大小的功能。可以使用以下命令进行安装：

npm install vue-draggable-resizable

接下来，我们可以创建一个名为 `DraggableDialog.vue` 的组件。代码如下：

<template>
  <vue-draggable-resizable :w="width" :h="height" :x="x" :y="y">
    <div class="dialog-header" @mousedown="onMouseDown">
      <slot name="header">Header</slot>
    </div>
    <div class="dialog-body">
      <slot name="body">Body</slot>
    </div>
  </vue-draggable-resizable>
</template>

<script>
import VueDraggableResizable from 'vue-draggable-resizable';

export default {
  components: {
    VueDraggableResizable,
  },
  props: {
    width: {
      type: Number,
      default: 400,
    },
    height: {
      type: Number,
      default: 300,
    },
    x: {
      type: Number,
      default: 0,
    },
    y: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    onMouseDown(event) {
      const offsetX = event.clientX - event.target.offsetLeft;
      const offsetY = event.clientY - event.target.offsetTop;

      const onMouseMove = (event) => {
        this.x = event.clientX - offsetX;
        this.y = event.clientY - offsetY;
      };

      const onMouseUp = () => {
        document.removeEventListener('mousemove', onMouseMove);
        document.removeEventListener('mouseup', onMouseUp);
      };

      document.addEventListener('mousemove', onMouseMove);
      document.addEventListener('mouseup', onMouseUp);
    },
  },
};
</script>

<style scoped>
.dialog-header {
  background-color: #eee;
  padding: 8px;
  cursor: move;
}

.dialog-body {
  padding: 8px;
}
</style>

在这个组件中，我们使用了 `vue-draggable-resizable` 来实现拖拽和调整大小的功能，同时也添加了自定义的样式和鼠标事件来实现拖拽的效果。

你可以在父组件中使用这个组件，并传递一些 props 来设置弹窗的大小和位置。例如：

<template>
  <div>
    <button @click="showDialog = true">Show Dialog</button>

    <draggable-dialog v-if="showDialog" :x="dialogX" :y="dialogY" :width="dialogWidth" :height="dialogHeight">
      <template v-slot:header>
        Custom Header
      </template>

      <template v-slot:body>
        Custom Body
      </template>
    </draggable-dialog>
  </div>
</template>

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

export default {
  components: {
    DraggableDialog,
  },
  data() {
    return {
      showDialog: false,
      dialogX: 100,
      dialogY: 100,
      dialogWidth: 400,
      dialogHeight: 300,
    };
  },
};
</script>

在这个例子中，我们使用了 `v-if` 来控制弹窗是否显示，同时传递了一些 props 来设置弹窗的大小和位置，还使用了 slot 来自定义弹窗的头部和内容部分。

这样，一个简单的拖拽弹窗组件就完成了。希望能对你有所帮助！