vue实现带自动吸附功能的悬浮球
作者：生气不如去争气
这篇文章主要为大家详细介绍了vue实现带自动吸附功能的悬浮球，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现带自动吸附功能的悬浮球，供大家参考，具体内容如下
封装的组件代码，可以引到页面直接使用
<template>
<div
ref="floatDrag"
class="float-position"
:style="{ left: left + 'px', top: top + 'px', zIndex: zIndex }"
@touchmove.prevent
@mousemove.prevent
@mousedown="mouseDown"
@mouseup="mouseUp"
>
<svg
t="1630029318602"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="1244"
width="200"
height="200"
>
<path
d="M554.376075 850.102995l0.208185 87.874926 170.711774-0.14573v85.355887l-209.038649 0.187367c-1.39484 0.124911-2.727225 0.41637-4.163702 0.41637s-2.706406-0.291459-4.163702-0.41637l-208.997011 0.187366v-85.230975l170.33704-0.14573-0.208185-88.041474A383.643483 383.643483 0 0 1 128.200378 469.061825h84.772969a298.37087 298.37087 0 0 0 294.769268 297.704678c1.290748-0.124911 2.539858-0.395552 3.872243-0.395551s2.498221 0.270641 3.76815 0.374733a298.350052 298.350052 0 0 0 294.60272-297.704678h85.751438a383.664302 383.664302 0 0 1-341.361091 381.061988z m-42.240755-168.047005A213.160713 213.160713 0 0 1 298.93297 468.936914h0.458007l-0.374733-255.65129a213.160713 213.160713 0 0 1 426.300608-1.936121c0 0.374733 0.124911 0.728648 0.124911 1.124199l0.374733 256.463212a42.782036 42.782036 0 0 1-0.791103 7.890215 213.035802 213.035802 0 0 1-212.890073 205.228861z m128.32529-213.223168l-0.374734-255.65129h-0.333096a127.721552 127.721552 0 0 0-255.422286 0h-0.166548l0.374733 255.65129v1.061744a127.659097 127.659097 0 0 0 255.318194-0.957652h0.624555a0.895196 0.895196 0 0 0-0.124911-0.104092z m-129.366215-42.532214h2.081851H510.990302z"
fill="#fff"
p-id="1245"
></path>
</svg>
</div>
</template>
<script>
export default {
name: "DragBall",
props: {
distanceRight: {
type: Number,
default: 0
},
distanceBottom: {
type: Number,
default: 100
},
isScrollHidden: {
type: Boolean,
default: false
},
isCanDraggable: {
type: Boolean,
default: true
},
zIndex: {
type: Number,
default: 50
},
value: {
type: String,
default: "悬浮球！"
}
},
//data 域
data() {
return {
clientWidth: null,
clientHeight: null,
left: 0,
top: 0,
timer: null,
currentTop: 0,
mousedownX: 0,
mousedownY: 0
};
},
created() {
this.clientWidth = document.documentElement.clientWidth;
this.clientHeight = document.documentElement.clientHeight;
},
mounted() {
this.isCanDraggable &&
this.$nextTick(() => {
this.floatDrag = this.$refs.floatDrag;
// 获取元素位置属性
this.floatDragDom = this.floatDrag.getBoundingClientRect();
// 设置初始位置
this.left =
this.clientWidth - this.floatDragDom.width - this.distanceRight;
this.top =
this.clientHeight - this.floatDragDom.height - this.distanceBottom;
this.initDraggable();
});
this.isScrollHidden && window.addEventListener("scroll", this.handleScroll);
window.addEventListener("resize", this.handleResize);
},
methods: {
/**
* 设置滚动监听
* 设置滚动时隐藏悬浮按钮，停止时显示
*/
handleScroll() {
this.timer && clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.handleScrollEnd();
}, 200);
this.currentTop =
document.documentElement.scrollTop || document.body.scrollTop;
if (this.left > this.clientWidth / 2) {
// 判断元素位置再左侧还是右侧
this.left = this.clientWidth + this.floatDragDom.width;
} else {
this.left = -this.floatDragDom.width;
}
},
/**
* 滚动结束
*/
handleScrollEnd() {
let scrollTop =
document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop === this.currentTop) {
console.log(this.left);
if (this.left > this.clientWidth / 2) {
// 判断元素位置再左侧还是右侧
this.left = this.clientWidth - this.floatDragDom.width;
} else {
this.left = 0;
}
clearTimeout(this.timer);
}
},
/**
* 窗口resize监听
*/
handleResize() {
this.clientWidth = document.documentElement.clientWidth;
this.clientHeight = document.documentElement.clientHeight;
this.checkDraggablePosition();
},
/**
* 初始化draggable
*/
initDraggable() {
this.floatDrag.addEventListener("touchstart", this.toucheStart);
this.floatDrag.addEventListener("touchmove", e => this.touchMove(e));
this.floatDrag.addEventListener("touchend", this.touchEnd);
},
mouseDown(e) {
const event = e || window.event;
this.mousedownX = event.screenX;
this.mousedownY = event.screenY;
const that = this;
let floatDragWidth = this.floatDragDom.width / 2;
let floatDragHeight = this.floatDragDom.height / 2;
if (event.preventDefault) {
event.preventDefault();
}
this.canClick = false;
this.floatDrag.style.transition = "none";
document.onmousemove = function(e) {
var event = e || window.event;
that.left = event.clientX - floatDragWidth;
that.top = event.clientY - floatDragHeight;
if (that.left < 0) that.left = 0;
if (that.top < 0) that.top = 0;
if (that.left >= that.clientWidth - floatDragWidth * 2) {
that.left = that.clientWidth - floatDragWidth * 2;
}
if (that.top >= that.clientHeight - floatDragHeight * 2) {
that.top = that.clientHeight - floatDragHeight * 2;
}
};
},
mouseUp(e) {
const event = e || window.event;
//判断只是单纯的点击，没有拖拽
if (
this.mousedownY == event.screenY &&
this.mousedownX == event.screenX
) {
this.$emit("handlepaly");
}
document.onmousemove = null;
this.checkDraggablePosition();
this.floatDrag.style.transition = "all 0.3s";
},
toucheStart() {
this.canClick = false;
this.floatDrag.style.transition = "none";
},
touchMove(e) {
this.canClick = true;
if (e.targetTouches.length === 1) {
// 单指拖动
let touch = event.targetTouches[0];
this.left = touch.clientX - this.floatDragDom.width / 2;
this.top = touch.clientY - this.floatDragDom.height / 2;
}
},
touchEnd() {
if (!this.canClick) return; // 解决点击事件和touch事件冲突的问题
this.floatDrag.style.transition = "all 0.3s";
this.checkDraggablePosition();
},
/**
* 判断元素显示位置
* 在窗口改变和move end时调用
*/
checkDraggablePosition() {
if (this.left + this.floatDragDom.width / 2 >= this.clientWidth / 2) {
// 判断位置是往左往右滑动
this.left = this.clientWidth - this.floatDragDom.width;
} else {
this.left = 0;
}
if (this.top < 0) {
// 判断是否超出屏幕上沿
this.top = 0;
}
if (this.top + this.floatDragDom.height >= this.clientHeight) {
// 判断是否超出屏幕下沿
this.top = this.clientHeight - this.floatDragDom.height;
}
}
},
beforeDestroy() {
window.removeEventListener("scroll", this.handleScroll);
window.removeEventListener("resize", this.handleResize);
}
};
</script>
<style>
html,
body {
overflow: hidden;
}
</style>
<style scoped lang="less">
.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;
}
</style>页面中使用：
<template>
<div>
<drag @handlepaly="handleaudioplay" style="cursor:pointer"></drag>
</div>
</template>
<script>
import drag from "./dragbase";
export default {
components: { drag },
methods: {
handleaudioplay() {
console.log(123);
}
}
};
</script>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。