一、拖拽组件
<template>
<div id="dragAssembly" ref="dragBox" :style="{ width: w, height: h }">
<div id="dragHeader" @mousedown.stop="mouseDownHandler">
<span class="dragTitle">{{ title }}</span>
<span class="el-icon-close" @click="close"></span>
</div>
<div id="dragBody">
<slot name="content"></slot>
</div>
</div>
</template>
<script>
export default {
name: "DragAssembly",
components: {},
props: {
title: {
type: String,
default: "",
},
w: {
type: String,
default: "700px",
},
h: {
type: String,
default: "500px",
},
},
data() {
return {
// 是否可以移动
isMove: false,
// 移动开始位置
startPosition: {},
// 元素当前位置
currentPosition: {},
// 拖拽元素
dragHeader: 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.dragAssembly = document.getElementById("dragAssembly");
// 鼠标移动事件
this.dragAssembly.addEventListener("mousemove", this.mouseMoveHandler);
// 鼠标抬起事件
this.dragAssembly.addEventListener("mouseup", (e) => {
this.isMove = false;
this.dragAssembly.removeEventListener(
"mousemove",
this.mouseMoveHandler
);
});
// 鼠标移出事件
this.dragAssembly.addEventListener("mouseleave", (e) => {
this.isMove = false;
this.dragAssembly.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="less" scoped>
#dragAssembly {
position: fixed;
left: 50%;
top: 50%;
z-index: 999;
transform: translate(-50%, -50%);
background-color: #030e06;
color: #fff;
border-radius: 10px;
#dragHeader {
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>
二、引用拖拽组件
<template>
<DragAssembly
ref="dragAssembly"
w="600px"
h="400px"
title="添加模型"
@close="closeWin"
v-if="show">
<div class="winContent" slot="content">
<div class="winInfo"></div>
<!-- 按钮 -->
<div class="winBtn">
<el-button size="mini" @click="closeWin">取消</el-button>
<el-button size="mini" @click="confirm">确定</el-button>
</div>
</div>
</DragAssembly>
</template>
<script>
export default {
name: "OpenScene",
components: {
DragAssembly: () => import("@components/Common/DragAssembly.vue"),
},
props: {},
data() {
return {
// 是否关闭
show: false,
};
},
computed: {},
created() {},
mounted() {
this.initParams();
},
methods: {
// ------------------<<请求>>------------------
// 发送添加请求
confirm() {},
// ------------------<<其他>>------------------
// 初始化参数
initParams() {},
// 打开窗口
openWin() {
this.show = true;
},
// 关闭窗口
closeWin() {
this.show = false;
},
// 通知父组件
sendMessage() {
this.$emit("message");
},
},
};
</script>
<style lang="less" scoped>
.winContent {
width: 100%;
height: 100%;
background-color: #1d2f23;
padding: 10px 20px;
box-sizing: border-box;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
.winInfo {
width: 100%;
height: calc(100% - 60px);
}
.winBtn {
width: 100%;
height: 60px;
display:flex;
align-items: center;
justify-content: flex-end;
}
}
</style>