好的，我可以帮你
手写一个基于
Vue3的弹窗拖拽
组件示例代码。
首先，你需要安装
Vue3:
```
npm install
vue@next
```
然后，创建一个Draggable.
vue组件，代码如下：
```
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标签的方式来使用它，例如：
```
vue
<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的弹窗拖拽
组件！
最低0.47元/天 解锁文章
3719
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
