Browse Source

doc: update drag modal demo

pull/4757/head
tangjinzhou 3 years ago
parent
commit
c127bac6fe
  1. 29
      components/modal/demo/modal-render.vue

29
components/modal/demo/modal-render.vue

@ -51,29 +51,28 @@ export default defineComponent({
}; };
const startX = ref<number>(0); const startX = ref<number>(0);
const startY = ref<number>(0); const startY = ref<number>(0);
const startUpdatePos = ref(false); const startedDrag = ref(false);
const transformX = ref(0); const transformX = ref(0);
const transformY = ref(0); const transformY = ref(0);
const preTransformX = ref(0); const preTransformX = ref(0);
const preTransformY = ref(0); const preTransformY = ref(0);
let timeoutId; watch([x, y], () => {
if (!startedDrag.value) {
startX.value = x.value;
startY.value = y.value;
preTransformX.value = transformX.value;
preTransformY.value = transformY.value;
}
startedDrag.value = true;
});
watch(isDragging, () => { watch(isDragging, () => {
clearTimeout(timeoutId); if (!isDragging) {
timeoutId = setTimeout(() => { startedDrag.value = false;
if (isDragging.value) { }
startX.value = x.value;
startY.value = y.value;
preTransformX.value = transformX.value;
preTransformY.value = transformY.value;
startUpdatePos.value = true;
} else {
startUpdatePos.value = false;
}
}, 50);
}); });
watchEffect(() => { watchEffect(() => {
if (startUpdatePos.value) { if (startedDrag.value) {
transformX.value = preTransformX.value + x.value - startX.value; transformX.value = preTransformX.value + x.value - startX.value;
transformY.value = preTransformY.value + y.value - startY.value; transformY.value = preTransformY.value + y.value - startY.value;
} }

Loading…
Cancel
Save