前言：借鉴的百度出来的一篇文章修改的，但是想记录一下的时候，找不到那篇文章了。仅做记录用：
单独写的一个悬浮按钮组件，在父组件中引入使用即可，样式可能还有些问题，在手机中还能够用。但是在pad之类的大屏幕设备上，位置和大小有些问题。后面再看看 。
isPad是为了处理pad设备上的按钮大小和位置的，不需要的话，需要删除一下全篇的isPad和三目运算符。
父组件中，import,components:{} <floatButton></floatButton> 就好了
<template><!-- 子组件 --><div class="float_button"><div@click="onBtnClicked"ref="floatButton"class="float_info":style="{'width': itemWidth + 'px','margin':'5px 10px', 'height': itemHeight + 'px', 'left': left + 'px', 'top': top + 'px'}"><span class="text">{{ text }}</span></div></div></template><script>import {isPad} from "util/index"export default {data() {return {clientWidth: 0,clientHeight: 0,timer: null,currentTop: 0,left: 0,top: 0,text: "联系我们",itemWidth: isPad() ? 90 : 70 , //按钮宽度isShort: true,itemHeight: 32, // 悬浮按钮高度gapWidth: 0, // 距离左右两边距离coefficientHeight: 0.6, // 从上到下距离比例}},props: {},computed: {},created() {// console.log('屏幕宽度', document.documentElement.clientWidth)// console.log('屏幕高度度', document.documentElement.clientHeight)let type = navigator.userAgent;// console.log('设备', type)this.clientWidth = document.documentElement.clientWidththis.clientHeight = document.documentElement.clientHeightthis.left = this.clientWidth - this.itemWidth - this.gapWidth - 20;this.top = this.clientHeight * this.coefficientHeight},watch: {left(n, o) {// console.log('新->', n, ';旧->', o)}},methods: {onBtnClicked() {// this.$emit("onFloatBtnClicked")if (this.text == '联系我们' && this.isShort == true) {this.itemWidth = isPad()? 340 : 250;this.isShort = false;this.text = "请联系您的专属客户经理：13456789099";} else if (this.isShort == false) {this.itemWidth =isPad()? 90 : 70;this.isShort = true;this.text = "联系我们";}},handleScrollStart() {console.log('这是啥时候触发呀？ScrollStart')this.timer && clearTimeout(this.timer)this.timer = setTimeout(() => {this.handleScrollEnd()}, 300)this.currentTop = document.documentElement.scrollTop || document.body.scrollTopif (this.left > this.clientWidth / 2) {this.left = this.clientWidth - this.itemWidth / 2} else {this.left = -this.itemWidth / 2}},handleScrollEnd() {let scrollTop = document.documentElement.scrollTop || document.body.scrollTopif (scrollTop === this.currentTop) {if (this.left > this.clientWidth / 2) {this.left = this.clientWidth - this.itemWidth - this.gapWidth} else {this.left = this.gapWidth}clearTimeout(this.timer)}}},mounted() {this.$nextTick(() => {const floatButton = this.$refs.floatButtonfloatButton.addEventListener("touchstart", () => {floatButton.style.transition = 'none'})// 在拖拽的过程中，组件应该跟随手指的移动而移动。floatButton.addEventListener("touchmove", (e) => {// console.log('移动中', e)if (e.targetTouches.length === 1) { // 一根手指let touch = e.targetTouches[0]this.left = touch.clientX - 20this.top = touch.clientY - 25}})// 拖拽结束以后，重新调整组件的位置并重新设置过度动画。floatButton.addEventListener("touchend", () => {floatButton.style.transition = 'all 0.3s'console.log('拖拽结束后left', this.left)if (this.left > document.documentElement.clientWidth / 2) {this.left = document.documentElement.clientWidth - this.itemWidth - 20;} else {this.left = 0}})})},beforeDestroy() {// 添加监听页面滚动window.removeEventListener('scroll', this.handleScrollStart)},destroyed() { }}</script><style lang="less">.float_button {.float_info {box-shadow: #1666ca;transition: all 0.3s;position: fixed;bottom: 436px;right: 0;margin: 5px 10px;display: flex;flex-flow: row;justify-content: center;align-items: center;z-index: 999;background: #1666ca;background-color: rgba(22, 102, 202, 0.6);border-radius: 10px;cursor: pointer;.text {font-size: 12px;color: #fff;}}}</style>
