You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
1.8 KiB
Vue
79 lines
1.8 KiB
Vue
<template>
|
|
<div
|
|
ref="button"
|
|
class="draggable-button"
|
|
id="draggable-button"
|
|
@mousedown="dragButton"
|
|
@touchstart="dragButton"
|
|
>
|
|
<uni-icons @click="goHome" type="home" size="30" color="#fff"></uni-icons>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, onBeforeUnmount } from "vue";
|
|
|
|
const button = ref(null);
|
|
let startX, startY, posX, posY, mouseMoveTracker, mouseUpTracker;
|
|
|
|
const goHome = () => {
|
|
console.log(11);
|
|
uni.reLaunch({ url: "/pages/main/index/index" });
|
|
};
|
|
|
|
const dragButton = (event) => {
|
|
// event.preventDefault();
|
|
|
|
// 初始化坐标
|
|
startX = event.touches[0]?.clientX - button.value.offsetLeft;
|
|
startY = event.touches[0]?.clientY - button.value.offsetTop;
|
|
|
|
// 添加鼠标移动监听
|
|
mouseMoveTracker = (event) => {
|
|
posX = event.touches[0]?.clientX - startX;
|
|
posY = event.touches[0]?.clientY - startY;
|
|
button.value.style.position = "absolute";
|
|
button.value.style.top = `${posY}px`;
|
|
button.value.style.left = `${posX}px`;
|
|
};
|
|
document.addEventListener("touchmove", mouseMoveTracker);
|
|
|
|
// 添加鼠标释放监听
|
|
mouseUpTracker = () => {
|
|
document.removeEventListener("touchmove", mouseMoveTracker);
|
|
document.removeEventListener("touchend", mouseUpTracker);
|
|
};
|
|
document.addEventListener("touchend", mouseUpTracker);
|
|
};
|
|
|
|
onMounted(() => {
|
|
if (!button.value) {
|
|
document.body.appendChild(button.value);
|
|
}
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
if (button.value) {
|
|
document.body.removeChild(button.value);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.draggable-button {
|
|
position: fixed;
|
|
cursor: pointer;
|
|
/* 其他样式 */
|
|
right: 20px;
|
|
top: 45%;
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
background-color: #cdcdcd;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 900000;
|
|
}
|
|
</style>
|