vue,页面悬浮按钮

// HTML代码
<div ref="dragArea" class="drag-area"><el-tooltip effect="dark" content="返回" placement="top"><el-button size="mini" icon="el-icon-back" circle @click="callback"></el-button></el-tooltip></div>

// JS代码mounted() {/*** 监听悬浮拖拽区域*/this.$nextTick(() => {// 获取DOM元素let dragArea = this.$refs.dragArea;// 缓存 clientX clientY 的对象: 用于判断是点击事件还是移动事件let clientOffset = {};// 绑定鼠标按下事件dragArea.addEventListener("mousedown", (event) => {let offsetX = dragArea.getBoundingClientRect().left; // 获取当前的x轴距离let offsetY = dragArea.getBoundingClientRect().top; // 获取当前的y轴距离let innerX = event.clientX - offsetX; // 获取鼠标在方块内的x轴距let innerY = event.clientY - offsetY; // 获取鼠标在方块内的y轴距console.log(offsetX, offsetY, innerX, innerY);// 缓存 clientX clientYclientOffset.clientX = event.clientX;clientOffset.clientY = event.clientY;// 鼠标移动的时候不停的修改div的left和top值document.onmousemove = function (event) {dragArea.style.left = event.clientX - innerX + "px";dragArea.style.top = event.clientY - innerY + "px";// dragArea 距离顶部的距离let dragAreaTop = window.innerHeight - dragArea.getBoundingClientRect().height;// dragArea 距离左部的距离let dragAreaLeft = window.innerWidth - dragArea.getBoundingClientRect().width;// 边界判断处理// 1、设置左右不能动// dragArea.style.left = dragAreaLeft + "px";// 1.设置左侧边界if (dragArea.getBoundingClientRect().left <= 0) {dragArea.style.left = "0px";}// 2.设置右侧边界if (dragArea.getBoundingClientRect().left >= dragAreaLeft) {dragArea.style.left = dragAreaLeft + "px";}// 3、设置顶部边界if (dragArea.getBoundingClientRect().top <= 0) {dragArea.style.top = "0px";}// 4、设置底部边界if (dragArea.getBoundingClientRect().top >= dragAreaTop) {dragArea.style.top = dragAreaTop + "px";}};// 鼠标抬起时，清除绑定在文档上的mousemove和mouseup事件；否则鼠标抬起后还可以继续拖拽方块document.onmouseup = function () {document.onmousemove = null;document.onmouseup = null;};}, false);// 绑定鼠标松开事件dragArea.addEventListener('mouseup', (event) => {let clientX = event.clientX;let clientY = event.clientY;if (clientX === clientOffset.clientX && clientY === clientOffset.clientY) {console.log('click 事件');} else {console.log('drag 事件');}})});},

// css代码
<style scoped lang="scss">
.drag-area {position: fixed;right: 20px;top: 20%;z-index: 99999;padding: 13px;width: fit-content;opacity: 1;background-color: rgba(255, 255, 255, 0.1);border-radius: 8px;box-shadow: 0px 2px 15px 0px rgba(9, 41, 77, 0.15);cursor: move;user-select: none;text-align: center;
}
<style>

可拖拽悬浮按钮