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