vue移动端项目拖拽客服组件
时间：2021-06-24 18:38:02
收藏：0
阅读：0
记录一下第一次封装组件
<template>
<div ref="kefu" class="kefu"
@touchstart="touchstart"
@touchend="touchend"
@touchmove="mousemove">
<slot>
</slot>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
},
data() {
return {
falg: false,
};
},
mounted() {},
methods: {
touchstart() {
this.falg = true;
this.$refs.kefu.style.transition="none";
},
touchend() {
this.falg = false;
this.$refs.kefu.style.transition="all 1s";
let left = this.$refs.kefu.offsetLeft;
let screenWidth = window.screen.width;
let oWidth = this.$refs.kefu.offsetWidth;
if (left + oWidth / 2 <= screenWidth / 2) {
this.$refs.kefu.style.left = -oWidth / 2 + "px";
} else {
this.$refs.kefu.style.left = screenWidth -oWidth / 2 + "px";
}
},
mousemove(e) {
if (this.falg) {
let clientY = e.targetTouches[0].clientY;
let clientX = e.targetTouches[0].clientX;
let offsetHeight = this.$refs.kefu.offsetHeight;
let offsetWidth = this.$refs.kefu.offsetWidth;
let top = clientY - offsetHeight / 2;
let left = clientX - offsetWidth / 2;
// 屏幕得宽度
let screenWidth = window.screen.width;
let screenHeight = window.screen.height;
let maxTop = screenHeight - offsetHeight;
let maxLeft = screenWidth - offsetWidth;
console.log(screenHeight);
if (top <= 0) {
top = 0;
}
if (top > maxTop) {
top = maxTop;
}
if (left <= 0) {
left = 0;
}
left = left > maxLeft ? maxLeft : left;
this.$refs.kefu.style.top = top + "px";
this.$refs.kefu.style.left = left + "px";
}
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.kefu {
position: fixed;
}
</style>
评论（0）