vue实现移动端可拖拽式icon图标 vue实现移动端可拖拽式icon图标

本文实例为大家分享了vue实现移动端可拖拽式icon图标的具体代码，供大家参考，具体内容如下
需求描述：在移动端页面悬浮一个可随便拖拽的图标，类似于苹果手机的辅助触控小圆点，并且可随意拖动。
【vue实现移动端可拖拽式icon图标】预览：

文章图片

组件代码如下：

.ys-float-btn{background:rgba(56,181,77,1); box-shadow:0 2px 10px 0 rgba(0,0,0,0.1); border-radius:50%; color: #666666; z-index: 20; transition: all 0.3s; display: flex; flex-direction: column; justify-content: center; align-items: center; position: fixed; bottom: 20vw; img{width: 50%; height: 50%; object-fit: contain; margin-bottom: 3px; }}.su_img{width: 40px; height: 40px; margin: 8px 0 0 0; }

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