vue实现带自动吸附功能的悬浮球 vue实现带自动吸附功能的悬浮

本文实例为大家分享了vue实现带自动吸附功能的悬浮球，供大家参考，具体内容如下

文章图片

【vue实现带自动吸附功能的悬浮球】封装的组件代码，可以引到页面直接使用

html,body {overflow: hidden; }.float-position {position: absolute; z-index: 10003; right: 0; top: 70%; width: 3.6em; height: 3.6em; background: deepskyblue; border-radius: 50%; overflow: hidden; box-shadow: 0px 0px 10px 2px skyblue; display: flex; align-items: center; justify-content: center; padding: 0.8em; user-select: none; }.cart {border-radius: 50%; width: 5em; height: 5em; display: flex; align-items: center; justify-content: center; }.header-notice {display: inline-block; transition: all 0.3s; span {vertical-align: initial; }.notice-badge {color: inherit; .header-notice-icon {font-size: 16px; padding: 4px; }}}.drag-ball .drag-content {overflow-wrap: break-word; font-size: 14px; color: #fff; letter-spacing: 2px; }

页面中使用：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。