之前寫過懸浮窗的效果，這次做了個總結(jié)，網(wǎng)頁端和移動端都可以用兼容，封裝的組件代碼，可以引到頁面直接使用
做了簡單的注釋 大家自行了解
<template>
<div
ref="floatDrag"
class="float-position"
:style="{ left: left + 'px', top: top + 'px', zIndex: zIndex }"
@touchmove.prevent
@mousemove.prevent
@mousedown="mouseDown"
@mouseup="mouseUp"
>
<div id="side-windows">
<div class="shrink">
<div class="problem-feedback" @click.stop="showDialog()">
<img :src="feedback" alt="" />
<p>問題<br />反饋</p>
</div>
</div>
</div>
</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,
feedback: require('') // 問題
};
},
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: {
showDialog() {
let url
window.open(url, '_blank')
},
/**
* 設置滾動時隱藏懸浮按鈕，停止時顯示
*/
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) {
// 判斷元素位置再左側(cè)還是右側(cè)
this.left = this.clientWidth + this.floatDragDom.width;
} else {
this.left = -this.floatDragDom.width;
}
},
/**
* 滾動結(jié)束
*/
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);
}
},
/**
* 窗口監(jiān)聽
*/
handleResize() {
this.clientWidth = document.documentElement.clientWidth;
this.clientHeight = document.documentElement.clientHeight;
this.checkDraggablePosition();
},
/**
* 初始化
*/
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";
setTimeout(() => {
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;
}
// 解決鼠標移出窗口 松開鼠標后 回到窗口內(nèi) 懸浮繼續(xù)跟隨問題
if(event.clientX<=0 || event.clientY<=0 || event.clientY>= that.clientHeight || event.clientX>= that.clientWidth){
that.mouseUp(event)
}
};
}, 20);
},
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時調(diào)用
*/
checkDraggablePosition() {
let details = document.querySelector('.details')
if (this.left + this.floatDragDom.width / 2 >= this.clientWidth / 2) {
// 判斷位置是往左往右滑動
this.left = this.clientWidth - this.floatDragDom.width;
details.style.right = '56px'
} else {
this.left = 0;
details.style.right = '-233px'
}
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 lang="less" scoped>
.float-position{
font-size: 12px;
position: fixed;
z-index: 500!important;
right: 0;
top: 50%;
width: 48px;
height: 168px;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
}
</style>
