vue实现悬浮球组件
首先在componets文件汇总创建FloatBall.vue
组件内容:
<template><transition>
<div ref="dragIcon"
class="dragIcon"
@touchstart.stop="handleTouchStart"
@touchmove.prevent.stop="handleTouchMove($event)"
@touchend.stop="handleTouchEnd"
:style="{left: left + 'px',top: top + 'px',width: itemWidth + 'px',height: itemHeight + 'px'}"
v-text="text"
v-if="isShow">
{{text}}
</div>
</transition>
</template>
<script>
export default {
props: {
text: {
type: String,
default: '球'
},
itemWidth: {
type: Number,
default: 40
},
itemHeight: {
type: Number,
default: 40
}
},
data(){
return{
left: 0,
top: 0,
startToMove: false,
isShow: true,
timer: null,
currentTop: null,
clientW: document.documentElement.clientWidth,//视口宽
clientH: document.documentElement.clientHeight,//视口高
}
},
created () {
this.left = (this.clientW - this.itemWidth - 30)
this.top = (this.clientH/2 - this.itemHeight/2)
},
mounted() {
this.bindScrollEvent()
},
beforeDestroy() {
// 记得销毁一些全局的的事件
this.removeScrollEvent()
},
methods: {
handleTouchStart() {
this.startToMove = true
this.$refs.dragIcon.style.transition = "none"
},
handleTouchMove(e) {
const clientX = e.targetTouches[0].clientX;//手指相对视口的x
const clientY = e.targetTouches[0].clientY;//手指相对视口的y
const isInScreen = clientX <= this.clientW && clientX >= 0 && clientY <= this.clientH && clientY >=0
if(this.startToMove && e.targetTouches.length === 1) {
if(isInScreen) {
this.left = clientX - this.itemWidth/2
this.top = clientY - this.itemHeight/2
}
}
},
handleTouchEnd() {
if(this.left < (this.clientW / 2)) {
this.left = 30;//不让贴边 所以设置30没设置0
this.handleIconY()
} else {
this.left = this.clientW - this.itemWidth - 30;//不让贴边 所以减30
this.handleIconY()
}
this.$refs.dragIcon.style.transition = "all .3s"
},
handleIconY() {
if (this.top < 0) {
this.top = 30;//不上帖上边所以设置为30 没设置0
} else if(this.top + this.itemHeight > this.clientH) {
this.top = this.clientH - this.itemHeight - 30;//不让帖下边所以减30
}
},
bindScrollEvent() {
window.addEventListener('scroll', this.handleScrollStart)
},
removeScrollEvent() {
window.removeEventListener('scroll',this.handleScrollStart)
},
handleScrollStart() {
this.isShow = false
this.timer && clearTimeout(this.timer)
this.timer = setTimeout(() => {
this.handleScrollEnd()
},300)
this.currentTop = document.documentElement.scrollTop || document.body.scrollTop
},
handleScrollEnd() {
this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
// 判断是否停止滚动的条件
if(this.scrollTop == this.currentTop) {
this.isShow = true
}
}
},
}
</script>
<style scoped>
.dragIcon {
position: fixed;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: orange;
line-height: 40px;
text-align: center;
color: #fff;
}
.v-enter {
opacity: 1;
}
.v-leave-to {
opacity: 0;
}
.v-enter-active,
.v-leave-active {
transition: opacity 0.3s;
}
</style>
引入使用:
import FloatBall from '@/components/FloatBall';
components:{FloatBall
},
页面使用:
<FloatBall :text="'哈哈'"></FloatBall>
效果:(拖拽)
。
以上是 vue实现悬浮球组件 的全部内容, 来源链接: utcz.com/z/376432.html