vue悬浮吸顶导航,vue实现弹出悬浮页面
这篇文章主要为大家详细介绍了某视频剪辑软件实现吸壁悬浮球，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现吸壁悬浮球的具体代码，供大家参考，具体内容如下
最近接到一个需求，需要一个客服悬浮按钮，可以拖拽并吸壁到页面周边，我们一起看看吧
1.创建一个模板，定义客服按钮，自定义v形阻力指令
模板
div class=容器
差异
class=btn
id=btn
:style= { visibility:对话框可见吗？隐藏":"可见"}"
v-drag={ set: openDialog }
draggable=false
img src= @/assets/images/cust-service。png alt= /
跨度联br /系br /客br /服/span
/div
聊天对话框v-model=对话框可见 @ on-close=关闭对话框/聊天对话框
/div
/模板
2 .拖拽指令主要监听埃尔的onmousedown、onmousemove、onmouseup事件，在鼠标放开事件通过偏移量判断是点击还是拖拽，如果是拖拽计算偏移量从而判断吸附于哪个壁
脚本
从导入聊天对话./聊天对话框；
导出默认值{
组件：{聊天对话}，
data() {
返回{
dialogVisible: false，
};
},
已安装(){
//初始化按钮位置
让clientW=document。documentelement。客户端宽度；
让clientH=document。documentelement。客户身高；
让div=document。getelementbyid( BTN )；
div。风格。top=clientH/2 px ；
div。风格。left=clientW-80 px ；
},
方法：{
openDialog() {
this.dialogVisible=true
},
closeDialog() {
this.dialogVisible=false
},
},
指令：{
拖动(el，绑定){
设oDiv=el
//禁止选择网页上的文字
文档。onselectstart=function(){
返回错误的
};
oDiv.onmousedown=function (e) {
//鼠标按下，计算当前元素距离可视区的距离
设disX=e . clientx-odiv。向左偏移；
let disY=e . clienty-odiv。offsettop
//记录初始位置
设firstX=oDiv.offsetLeft
let firstY=oDiv.offsetTop
设l=oDiv.offsetLeft
设t=oDiv.offsetTop
文档。onmousemove=function(e){
//通过事件委托，计算移动的距离
l=e . clientx-disX；
t=e . clienty-disY；
//移动当前元素
奥迪夫。风格。left=l px
奥迪夫。风格。top=t px
};
文档。onmouseup=函数(e){
//点击事件
如果(数学。ABS(l-first x)3 数学。ABS(t-first y)3){
装订。价值。set(真)；
}否则{
//拖拽事件
让clientW=document。documentelement。客户端宽度；
让clientH=document。documentelement。客户身高；
//判断偏移量，并吸壁
//垂直偏移量大于水平偏移量，左右吸壁，垂直控制范围
如果(数学。ABS(t-firstY)数学。ABS(l-firstX)){
if (l clientW/2 - 80) {
l=clientW-80；
}否则{
l=80
}
if(t 40)t=40；
else if(t clientH-140)t=clientH-140；
}否则{
//上下吸壁，水平控制范围
if (t clientH/2 - 140) {
t=clientH-140；
}否则{
t=40
}
if(l 80)l=80；
else if(l clientW-80)l=clientW-80；
}
奥迪夫。风格。top=t px
奥迪夫。风格。left=l px
}
document.onmousemove=null
document.onmouseup=null
};
//返回错误的不加的话可能导致黏连，就是拖到一个地方时差异粘在鼠标上不下来，相当于鼠标放开失效
返回错误的
};
},
},
};
/脚本
3.样式设置z指数始终保持在页面顶层，定义位置定位
样式lang=scss 范围。容器{。btn {
z指数：9999;
位置：固定；
宽度：40px
高度：130像素
溢出：隐藏；
背景：线性渐变(210deg，#f3f5f8，# ffffff)；
边框：2px solid # ffffff
box-shadow: 3px 5px 10px 0px rgba(0，0，0，0.1)；
边框半径：20px
文本对齐：居中；
img {
边距：5px 0；
宽度：30px
高度：30px
}
跨度{
字体大小：14px
颜色：# 333333;
光标：指针；
字体系列：方平SC；
}
}
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。