前言:借鉴的百度出来的一篇文章修改的,但是想记录一下的时候,找不到那篇文章了。仅做记录用:
单独写的一个悬浮按钮组件,在父组件中引入使用即可,样式可能还有些问题,在手机中还能够用。但是在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.clientWidth
this.clientHeight = document.documentElement.clientHeight
this.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.scrollTop
if (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.scrollTop
if (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.floatButton
floatButton.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 - 20
this.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>