vue实现吸壁悬浮球

本文实例为大家分享了vue实现吸壁悬浮球的具体代码,供大家参考,具体内容如下
最近接到一个需求,需要一个客服悬浮按钮,可以拖拽并吸壁到页面周边,我们一起看看吧
1.创建一个template,定义客服按钮,自定义v-drag指令


2.drag指令主要监听el的onmousedownonmousemoveonmouseup事件,在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实现吸壁悬浮球】以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    推荐阅读