vue 实现 浮动图标 仿iphone悬浮球

同级目录引用组件 ./
上一级目录，两个点 …/

原文应用案例

<!-- 给定一个初始位置position，插槽中填写想滑动的部分 -->
<xuanfuqiu :position="position"><d-add-button @click="addPigFarm" add-item="猪场"></d-add-button>
</xuanfuqiu>

我的引用
一定记得注册组件
不要重复写components

import xuanfuqiu from './xuanfuqiu'export default {name: '',components: {xuanfuqiu},

悬浮球代码

<template><div><div class="xuanfu" id="moveDiv" :style="position"@mousedown="down" @touchstart="down"@mousemove="move" @touchmove="move"@mouseup="end" @touchend="end"><slot></slot></div></div>
</template><script>
export default {name: "",components: {},props: {// 通过position来设置初始定位position: {type: Object,default: function() {return {top: "32.25rem",left: "18.34375rem"}}},// 通过fixed来禁用自由移动fixed: {type: Boolean,default: false}},data() {return {flags: false,positionTemp: { x: 0, y: 0 },   // 记录手指点击的位置nx: '', ny: '', dx: '', dy: '', xPum: '', yPum: '',}},watch: {},computed: {},methods: {// 实现移动端拖拽down(){if (this.fixed) {return}this.flags = true;var touch;// 该if判断是用touch还是mouse来移动if (event.touches) {touch = event.touches[0];} else {touch = event;}this.positionTemp.x = touch.clientX;   // 手指点击后的位置this.positionTemp.y = touch.clientY;this.dx = moveDiv.offsetLeft;    // 移动的div元素的位置this.dy = moveDiv.offsetTop;// console.log("moveDiv.offsetLeft", moveDiv.offsetLeft)// console.log("touch.clientX", touch.clientX)},move(){if(this.flags) {var touch ;if(event.touches){touch = event.touches[0];}else {touch = event;}this.nx = touch.clientX - this.positionTemp.x;   // 手指移动的变化量this.ny = touch.clientY - this.positionTemp.y;this.xPum = this.dx + this.nx;   // 移动后，div元素的位置this.yPum = this.dy + this.ny;let windowWidth = document.documentElement.clientWidthlet windowHeight = document.documentElement.clientHeight// console.log("window.clientWidth", windowWidth)// console.log(this.xPum)// console.log(" moveDiv.clientWidth",  moveDiv.clientWidth)if (this.xPum > 0 && (this.xPum + moveDiv.clientWidth < windowWidth)) {// movediv的左右边，未出界moveDiv.style.left = this.xPum + "px";} else if (this.xPum <= 0) {// 左边出界，则左边缘贴边moveDiv.style.left = 0 + "px";} else if (this.xPum + moveDiv.clientWidth >= windowWidth) {// 右边缘出界moveDiv.style.left = (windowWidth - moveDiv.clientWidth) + "px";// console.log("dx", windowWidth - moveDiv.clientWidth)}// 上下未出界if (this.yPum > 0 && (this.yPum + moveDiv.clientHeight < windowHeight)) {moveDiv.style.top = this.yPum +"px";} else if (this.yPum <= 0) {// 上边缘出界moveDiv.style.top = 0 + "px"} else if (this.yPum + moveDiv.clientHeight >= windowHeight) {// 下边缘// console.log("windowHeight:", windowHeight)// console.log("moveDiv.clientHeight:", moveDiv.clientHeight)// console.log(this.yPum + moveDiv.clientHeight)moveDiv.style.top = windowHeight - moveDiv.clientHeight + "px"}// 阻止页面的滑动默认事件，为了只让悬浮球滑动，其他部分不滑动；如果碰到滑动问题，1.2 请注意是否获取到 touchmove, 系统默认passive: true，无法使用preventDefault// document.addEventListener("touchmove", function(){//    event.preventDefault();// }, { passive: false });// document.addEventListener("mousemove", function(){//     event.preventDefault();// }, { passive: false });document.addEventListener("touchmove", this.preventDefault, { passive: false })document.addEventListener("mousemove", this.preventDefault, { passive: false })}},//鼠标释放时候的函数，鼠标释放，移除之前添加的侦听事件，将passive设置为true，不然背景会滑动不了end(){this.flags = false// 注意事项，在添加和删除监听事件时，其function必须是同名的函数，不能为匿名函数。document.removeEventListener('touchmove',this.preventDefault, false)document.removeEventListener('mousemove',this.preventDefault, false)// 下面两句是保证在移除监听事件后，除了悬浮球的部分还能够滑动，如果不添加，则无法滑动document.addEventListener("touchmove", function(e) {window.event.returnValue = true})document.addEventListener("mousemove", function(e) {window.event.returnValue = true})},preventDefault(e) {e.preventDefault()}},created() {},mounted() {}
}
</script><style lang="scss" scoped>
.xuanfu {/* 如果碰到滑动问题，1.3 请检查 z-index。z-index需比web大一级*/z-index: 999;position: fixed; // 这里的定位方式有待考量，fixed的话存在未知设置不合理，跑出屏幕不显示的问题
}
</style>

参考
https://blog.csdn.net/qq_41009742/article/details/101516232?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！