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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)