VUE PC端可拖动悬浮按钮

一、实现效果：

二、FloatButton.vue

<template><div><div class="sssss"><div class="callback float" @mousedown="down" @touchstart="down" @mousemove="move" @touchmove="move" @mouseover="over" @mouseout="out"@mouseup="end" @touchend="end" ref="fu" style="color: #1a1919;"><el-button circle @click="screen()">{{name}}</el-button></div></div></div>
</template><script>export default {name: "suspensionBall",props: {name: {type: String,default: '打开全屏'},},data() {return {left: 0,top: 40,bg: 1,menu: false,isLoading: false,flags: false, //控制使用position: {x: 0,y: 0,},nx: "",ny: "",dx: "",dy: "",xPum: "",yPum: "",movb: 1,num: 1,};},created() { },mounted() {this.left = this.$refs.fu.offsetLeft - 750;},methods: {out2() {this.menu = false;},over2() { },out() {this.bg = 2;},over() {this.menu = true;this.num = 2;this.bg = 1;},callback() {this.$router.go(-1);},onRefresh() {// window.location.reload();setTimeout((res) => {console.log(res);this.isLoading = false;}, 1000);},down() {this.flags = true;var touch;if (event.touches) {touch = event.touches[0];} else {touch = event;}this.position.x = touch.clientX;this.position.y = touch.clientY;this.dx = this.$refs.fu.offsetLeft;this.dy = this.$refs.fu.offsetTop;},move() {if (this.flags) {this.movb = 2;this.menu = false;var touch;if (event.touches) {touch = event.touches[0];} else {touch = event;}this.nx = touch.clientX - this.position.x;this.ny = touch.clientY - this.position.y;this.xPum = this.dx + this.nx;this.yPum = this.dy + this.ny;let width = window.innerWidth - this.$refs.fu.offsetWidth; //屏幕宽度减去自身控件宽度let height = window.innerHeight - this.$refs.fu.offsetHeight; //屏幕高度减去自身控件高度this.xPum < 0 && (this.xPum = 0);this.yPum < 0 && (this.yPum = 0);this.xPum > width && (this.xPum = width);this.yPum > height && (this.yPum = height);// if (this.xPum >= 0 && this.yPum >= 0 && this.xPum<= width &&this.yPum<= height) {this.$refs.fu.style.left = this.xPum + "px";this.$refs.fu.style.top = this.yPum + "px";this.left = this.xPum - 750;this.top = this.yPum;// }//阻止页面的滑动默认事件document.addEventListener("touchmove",function () {event.preventDefault();},false);}},//鼠标释放时候的函数end() {this.flags = false;},screen() {this.$emit("changeClick");},},};
</script>
<style scoped>.callback {position: fixed;width: 200px;height: 20px;background-repeat: no-repeat;background-size: 100% 100%;top: 200px;left: 90%;z-index: 99999;}.float {position: fixed;touch-action: none;text-align: center;border-radius: 24px;line-height: 48px;color: white;}.menuclass {text-align: left;position: absolute;color: #000;width: 764px;background: #ffffff;box-shadow: 0px 6px 26px 1px rgba(51, 51, 51, 0.16);padding: 20px;}.sssss {position: relative;background-color: #000;right: 0;z-index: 99999;}.titlea {font-size: 18px;font-family: Microsoft YaHei-Bold, Microsoft YaHei;font-weight: bold;color: #333333;}.boxa {display: flex;flex-wrap: wrap;margin-top: 20px;z-index: 999999;}.item {width: 168px;height: 75px;border-radius: 4px 4px 4px 4px;font-size: 16px;font-family: Microsoft YaHei-Bold, Microsoft YaHei;font-weight: bold;color: #ffffff;text-align: center;margin-left: 7px;line-height: 75px;}
</style>

三、父页面引用

<template><div><float-button ref="floatButton" :name="buttonName" @changeClick="screen" /></div>
</template><script>
import FloatButton from './chart/FloatButton'
export default {name: 'Index',components: {FloatButton},
}
</script>