修复拖动时错位问题
This commit is contained in:
@@ -1,9 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<view
|
<view
|
||||||
class="cl-float-view"
|
class="cl-float-view"
|
||||||
:class="{
|
|
||||||
'no-dragging': !position.isDragging
|
|
||||||
}"
|
|
||||||
:style="viewStyle"
|
:style="viewStyle"
|
||||||
@touchstart="onTouchStart"
|
@touchstart="onTouchStart"
|
||||||
@touchmove.stop.prevent="onTouchMove"
|
@touchmove.stop.prevent="onTouchMove"
|
||||||
@@ -16,7 +13,7 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { getSafeAreaHeight, getTabBarHeight, hasCustomTabBar, router } from "@/cool";
|
import { getSafeAreaHeight, getTabBarHeight, hasCustomTabBar, router } from "@/cool";
|
||||||
import { computed, reactive } from "vue";
|
import { computed, nextTick, reactive } from "vue";
|
||||||
import { clFooterOffset } from "../cl-footer/offset";
|
import { clFooterOffset } from "../cl-footer/offset";
|
||||||
|
|
||||||
defineOptions({
|
defineOptions({
|
||||||
@@ -80,7 +77,7 @@ type Position = {
|
|||||||
const position = reactive<Position>({
|
const position = reactive<Position>({
|
||||||
x: props.left, // 初始左边距10px
|
x: props.left, // 初始左边距10px
|
||||||
y: props.bottom, // 初始距离底部10px
|
y: props.bottom, // 初始距离底部10px
|
||||||
isDragging: false // 初始状态为非拖拽
|
isDragging: true // 初始状态为拖拽
|
||||||
});
|
});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -129,6 +126,14 @@ const viewStyle = computed(() => {
|
|||||||
// 设置高度
|
// 设置高度
|
||||||
style["height"] = `${props.size}px`;
|
style["height"] = `${props.size}px`;
|
||||||
|
|
||||||
|
// 拖拽过渡效果
|
||||||
|
if (position.isDragging) {
|
||||||
|
style["transition-property"] = "none";
|
||||||
|
} else {
|
||||||
|
style["transition-property"] = "left, bottom";
|
||||||
|
style["transition-duration"] = "300ms";
|
||||||
|
}
|
||||||
|
|
||||||
return style;
|
return style;
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -265,23 +270,20 @@ function onTouchEnd() {
|
|||||||
// 如果不在拖拽状态,直接返回
|
// 如果不在拖拽状态,直接返回
|
||||||
if (!position.isDragging) return;
|
if (!position.isDragging) return;
|
||||||
|
|
||||||
// 结束拖拽状态,恢复过渡动画
|
nextTick(() => {
|
||||||
position.isDragging = false;
|
// 结束拖拽状态,恢复过渡动画
|
||||||
|
position.isDragging = false;
|
||||||
|
|
||||||
// 执行边缘吸附逻辑
|
// 执行边缘吸附逻辑
|
||||||
if (!props.noSnapping) {
|
if (!props.noSnapping) {
|
||||||
performEdgeSnapping();
|
performEdgeSnapping();
|
||||||
}
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.cl-float-view {
|
.cl-float-view {
|
||||||
@apply fixed transition-none;
|
@apply fixed;
|
||||||
|
|
||||||
&.no-dragging {
|
|
||||||
@apply duration-300;
|
|
||||||
transition-property: left, bottom;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user