vue实现可拖拽移动悬浮球

封装悬浮球组件，文件名s-icons.vue 

<template><div ref="icons" class="icons-container" :style="{ left: left + 'px', top: top + 'px' }"><slot></slot></div>
</template>
<script>
export default {name: 'FloatIcons',props: {// 滚动idscroller: {type: String,default: ''},// 距离上有下左的安全距离padding: {type: String,default: '10 10 10 10'},// 初始位置距离底部的距离bottom: {type: Number,default: 0}},data () {return {timer: null,currentTop: 0,clientWidth: 0,clientHeight: 0,itemWidth: 0,itemHeight: 0,left: null,top: null}},computed: {// 滚动对象，默认空返回windowscrollContainer () {if (this.scroller === '') {return window} else {return document.getElementById(this.scroller)}},// 安全距离safeArea () {return this.padding.split(' ')}},created () {// 屏幕宽度this.clientWidth = document.documentElement.clientWidth// 屏幕高度this.clientHeight = document.documentElement.clientHeight},mounted () {this.$nextTick(() => {// 获取滚动元素this.scrollContainer.addEventListener('scroll', this.handleScrollStart)const div = this.$refs.icons// 获取宽度this.itemWidth = this.$refs.icons.offsetWidththis.itemHeight = this.$refs.icons.offsetHeight// 设置位置this.left = this.clientWidth - this.itemWidth - this.safeArea[1]this.top = this.clientHeight - this.itemWidth - this.bottomdiv.addEventListener('touchstart', () => {div.style.transition = 'none'})div.addEventListener('touchmove', e => {// 阻止默认动作e.preventDefault()if (e.targetTouches.length === 1) {const touch = event.targetTouches[0]this.left = touch.clientX - this.itemWidth / 2this.top = touch.clientY - this.itemHeight / 2}})div.addEventListener('touchend', () => {div.style.transition = 'all 0.3s'// 手指放开left位置if (this.left > this.clientWidth / 2) {this.left = this.clientWidth - this.itemWidth - this.safeArea[1]} else {this.left = this.safeArea[3]}// 手指放开top位置if (this.top < this.safeArea[0]) {this.top = this.safeArea[0]} else if (this.top > this.clientHeight - this.itemHeight - this.safeArea[2]) {// 不低于最低// this.top = this.clientHeight - this.itemHeight - this.safeArea[2]this.top = this.clientHeight - this.itemHeight}})})},beforeDestroy () {this.scrollContainer.removeEventListener('scroll', this.handleScrollStart)},methods: {// 滚动时候执行handleScrollStart () {this.timer && clearTimeout(this.timer)this.timer = setTimeout(() => {this.handleScrollEnd()}, 300)this.currentTop = document.documentElement.scrollTop || document.body.scrollTopif (this.left > this.clientWidth / 2) {this.left = this.clientWidth - this.itemWidth / 2} else {this.left = -this.itemWidth / 2}},handleScrollEnd () {const scrollTop = document.documentElement.scrollTop || document.body.scrollTopif (scrollTop === this.currentTop) {if (this.left > this.clientWidth / 2) {this.left = this.clientWidth - this.itemWidth - this.safeArea[1]} else {this.left = this.safeArea[3]}clearTimeout(this.timer)}}}
}
</script>
<style lang="less" scoped>
.icons-container {display: flex;flex-direction: column;justify-content: center;align-items: center;position: fixed;background: #ffffff;box-shadow: 0px 2px 4px 0px rgba(0, 97, 209, 0.1);border: 1px solid rgba(21, 95, 186, 0.1);// border-radius: 50%;z-index: 1000;transition: all 0.3s;
}
</style>

在封装了一层组件引入s-icons.vue 文件，文件名goToHome.vue

<template><float-icons class="icons-warp" :bottom="bottom" :scroller="scroller"><div class="float-icon-item" @click="goHomeClick"><div class="home-title">返回顶部</div></div></float-icons>
</template>
<script>
import FloatIcons from './s-icons'
export default {components: {'float-icons': FloatIcons},props: {// 滚动idscroller: {type: String,default: ''},// 初始位置距离底部的距离bottom: {type: Number,default: 60}},created () {},methods: {goHomeClick () {// 跳转其他页面// window.history.go(-(window.history.length - 2))// 回到顶部window.scrollTo({top: 0,left: 0,behavior: 'smooth' // 平滑滚动效果})}}
}
</script>
<style lang="less" scoped>
.icons-warp {border-radius: 50%;.float-icon-item {display: flex;flex-direction: column;align-items: center;justify-content: center;position: relative;width: 52px;height: 52px;.home-title {font-size: 14px;font-weight: 400;color: #1763bf;}}
}
</style>

最后一步，引入到页面中

<template><div class="main"><h1>顶部</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>底部</h1><GoToHome :bottom="bottom" /></div>
</template><script>
import GoToHome from './goToHome.vue'
export default {data () {return {bottom: 105}},methods: {},components: {GoToHome}
}
</script><style lang="less" scoped>
</style>