vue实现吸壁悬浮球
本文实例为大家分享了vue实现吸壁悬浮球的具体代码,供大家参考,具体内容如下
最近接到一个需求,需要一个客服悬浮按钮,可以拖拽并吸壁到页面周边,我们一起看看吧
1.创建一个template,定义客服按钮,自定义v-drag指令
文章图片
联
系
客
服
2.drag指令主要监听el的
onmousedown
、onmousemove
、onmouseup
事件,在onmouseup
事件通过偏移量判断是点击还是拖拽,如果是拖拽计算偏移量从而判断吸附于哪个壁3.样式设置z-index始终保持在页面顶层,定义position定位
.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; }}}
【vue实现吸壁悬浮球】以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
推荐阅读
- Vue使用vue-drag-resize生成悬浮拖拽小球
- SpringBoot|SpringBoot 集成MongoDB实现文件上传功能
- 如何在Debian 11中启动时运行脚本(详细实现步骤)
- Android开发之Navigationdrawer导航抽屉功能的实现(源码分享)
- Android研究之监听自身应用被卸载代码实现
- Android开发——本地验证码的简易实现(防止暴力登录)
- Android PullToZoomListView实现放大回弹效果
- Android 使用PopupWindow实现弹出更多的菜单
- C++中的接口(抽象类)
- 如何在Python中实现WebSocket(详细例子)