vue实现吸壁悬浮球 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实现吸壁悬浮球】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。