这篇文章主要介绍“vue怎么实现吸壁悬浮球”，在日常操作中，相信很多人在vue怎么实现吸壁悬浮球问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue怎么实现吸壁悬浮球”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
创建一个template，定义客服按钮，自定义v-drag指令
<template> <div class="container"> <div class="btn" id="btn" : v-drag="{ set: openDialog }" draggable="false" > <img src="@/assets/images/cust-service.png" alt="" /> <span>联<br />系<br />客<br />服</span> </div> <chat-dialog v-model="dialogVisible" @on-close="closeDialog"></chat-dialog> </div></template>drag指令主要监听el的onmousedown、onmousemove、onmouseup事件，在onmouseup事件通过偏移量判断是点击还是拖拽，如果是拖拽计算偏移量从而判断吸附于哪个壁
<script>import chatDialog from "./chatDialog";export default { components: { chatDialog }, data() { return { dialogVisible: false, }; }, mounted() { // 初始化按钮位置 let clientW = document.documentElement.clientWidth; let clientH = document.documentElement.clientHeight; let div = document.getElementById("btn"); div.style.top = clientH / 2 + "px"; div.style.left = clientW - 80 + "px"; }, methods: { openDialog() { this.dialogVisible = true; }, closeDialog() { this.dialogVisible = false; }, }, directives: { drag(el, binding) { let oDiv = el; // 禁止选择网页上的文字 document.onselectstart = function () { return false; }; oDiv.onmousedown = function (e) { // 鼠标按下，计算当前元素距离可视区的距离 let disX = e.clientX - oDiv.offsetLeft; let disY = e.clientY - oDiv.offsetTop; // 记录初始位置 let firstX = oDiv.offsetLeft; let firstY = oDiv.offsetTop; let l = oDiv.offsetLeft; let t = oDiv.offsetTop; document.onmousemove = function (e) { // 通过事件委托，计算移动的距离 l = e.clientX - disX; t = e.clientY - disY; // 移动当前元素 oDiv.style.left = l + "px"; oDiv.style.top = t + "px"; }; document.onmouseup = function (e) { // 点击事件 if (Math.abs(l - firstX) < 3 || Math.abs(t - firstY) < 3) { binding.value.set(true); } else { // 拖拽事件 let clientW = document.documentElement.clientWidth; let clientH = document.documentElement.clientHeight; // 判断偏移量,并吸壁 // 垂直偏移量大于水平偏移量，左右吸壁，垂直控制范围 if (Math.abs(t - firstY) > Math.abs(l - firstX)) { if (l > clientW / 2 - 80) { l = clientW - 80; } else { l = 80; } if (t < 40) t = 40; else if (t > clientH - 140) t = clientH - 140; } else { // 上下吸壁，水平控制范围 if (t > clientH / 2 - 140) { t = clientH - 140; } else { t = 40; } if (l < 80) l = 80; else if (l > clientW - 80) l = clientW - 80; } oDiv.style.top = t + "px"; oDiv.style.left = l + "px"; } document.onmousemove = null; document.onmouseup = null; }; // return false不加的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效 return false; }; }, },};</script>样式设置z-index始终保持在页面顶层，定义position定位
<style lang="scss" scoped>.container { .btn { z-index: 9999; position: fixed; width: 40px; height: 130px; overflow: hidden; background: linear-gradient(210deg, #f3f5f8, #ffffff); border: 2px solid #ffffff; box-shadow: 3px 5px 10px 0px rgba(0, 0, 0, 0.1); border-radius: 20px; text-align: center; img { margin: 5px 0; width: 30px; height: 30px; } span { font-size: 14px; color: #333333; cursor: pointer; font-family: PingFang SC; } }}</style>到此，关于“vue怎么实现吸壁悬浮球”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
