javascript
复制代码
<template>
<div id="dragWindow" ref="dragBox" :style="{ width: width, height: height }">
<div id="dragHead" @mousedown.stop="mouseDownHandler">
<slot name="title"></slot>
</div>
<div id="dragBody">
<slot name="content"></slot>
</div>
</div>
</template>
<script>
export default {
name: "DragWindow",
components: {},
props: {
title: {
type: String,
default: "",
},
width: {
type: String,
default: "300px",
},
height: {
type: String,
default: "100vh",
},
},
data() {
return {
// 是否可以移动
isMove: false,
// 移动开始位置
startPosition: {},
// 元素当前位置
currentPosition: {},
// 拖拽元素
dragHead: null,
};
},
computed: {},
created() {},
mounted() {},
methods: {
mouseDownHandler(e) {
// 获取元素当前位置
this.currentPosition = {
x: this.$refs.dragBox.offsetLeft,
y: this.$refs.dragBox.offsetTop,
};
// 获取移动开始位置
this.startPosition = {
x: e.clientX,
y: e.clientY,
};
// 设置为true,允许移动
this.isMove = true;
this.dragWindow = document.getElementById("dragWindow");
// 鼠标移动事件
this.dragWindow.addEventListener("mousemove", this.mouseMoveHandler);
// 鼠标抬起事件
this.dragWindow.addEventListener("mouseup", (e) => {
this.isMove = false;
this.dragWindow.removeEventListener(
"mousemove",
this.mouseMoveHandler
);
});
// 鼠标移出事件
this.dragWindow.addEventListener("mouseleave", (e) => {
this.isMove = false;
this.dragWindow.removeEventListener(
"mousemove",
this.mouseMoveHandler
);
});
},
// 鼠标移动事件
mouseMoveHandler(e) {
if (!this.isMove) {
return;
}
// 获取鼠标移动的距离
const nowX = e.clientX - this.startPosition.x,
nowY = e.clientY - this.startPosition.y;
// 计算并设置移动后的位置
this.$refs.dragBox.style.left = `${this.currentPosition.x + nowX}px`;
this.$refs.dragBox.style.top = `${this.currentPosition.y + nowY}px`;
},
// 关闭窗口
close() {
this.$emit("close");
},
},
};
</script>
<style lang="scss" scoped>
#dragWindow {
position: fixed;
left: 50%;
top: 50%;
z-index: 999;
transform: translate(-50%, -50%);
background-color: #030e06;
color: #fff;
border-radius: 10px;
#dragHead {
width: 100%;
height: 50px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: rgba(#34a83a, 1);
padding: 0px 10px 0px 20px;
box-sizing: border-box;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
position: relative;
.dragTitle {
font-size: 18px;
}
.el-icon-close {
font-size: 18px;
cursor: pointer;
&:hover {
color: #ff6347;
}
}
}
#dragBody {
width: 100%;
height: calc(100% - 50px);
}
}
</style>