correction scroll preview
This commit is contained in:
parent
c3c9de2ca2
commit
ccdd9bda05
3 changed files with 15 additions and 6 deletions
|
|
@ -149,7 +149,6 @@ onMounted(async () => {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
border: none;
|
border: none;
|
||||||
transform-origin: top center;
|
transform-origin: top center;
|
||||||
transition: transform 0.3s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -195,7 +195,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed, watch, onMounted, inject } from 'vue';
|
import { ref, computed, watch, onMounted, inject, nextTick } from 'vue';
|
||||||
import bookIcon from '/assets/svg/book.svg?raw';
|
import bookIcon from '/assets/svg/book.svg?raw';
|
||||||
import { useStylesheetStore } from '../../stores/stylesheet';
|
import { useStylesheetStore } from '../../stores/stylesheet';
|
||||||
import { useDebounce } from '../../composables/useDebounce';
|
import { useDebounce } from '../../composables/useDebounce';
|
||||||
|
|
@ -518,7 +518,7 @@ const syncFromStore = () => {
|
||||||
(rightPageMatch && rightPageMatch[0].includes('string(title)'));
|
(rightPageMatch && rightPageMatch[0].includes('string(title)'));
|
||||||
runningTitle.value = hasRunningTitle;
|
runningTitle.value = hasRunningTitle;
|
||||||
} finally {
|
} finally {
|
||||||
isUpdatingFromStore = false;
|
nextTick(() => { isUpdatingFromStore = false; });
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,13 +11,23 @@ import { ref, computed } from 'vue';
|
||||||
|
|
||||||
const zoomLevel = ref(1);
|
const zoomLevel = ref(1);
|
||||||
|
|
||||||
const zoomIn = () => { zoomLevel.value = Math.min(zoomLevel.value + 0.1, 3); };
|
const zoomIn = () => { triggerZoom(); zoomLevel.value = Math.min(zoomLevel.value + 0.1, 3); };
|
||||||
const zoomOut = () => { zoomLevel.value = Math.max(zoomLevel.value - 0.1, 0.2); };
|
const zoomOut = () => { triggerZoom(); zoomLevel.value = Math.max(zoomLevel.value - 0.1, 0.2); };
|
||||||
const zoomReset = () => { zoomLevel.value = 1; };
|
const zoomReset = () => { triggerZoom(); zoomLevel.value = 1; };
|
||||||
|
|
||||||
|
const isZooming = ref(false);
|
||||||
|
let zoomTimer = null;
|
||||||
|
|
||||||
|
const triggerZoom = () => {
|
||||||
|
isZooming.value = true;
|
||||||
|
clearTimeout(zoomTimer);
|
||||||
|
zoomTimer = setTimeout(() => { isZooming.value = false; }, 350);
|
||||||
|
};
|
||||||
|
|
||||||
const zoomStyle = computed(() => ({
|
const zoomStyle = computed(() => ({
|
||||||
transform: `scale(${zoomLevel.value})`,
|
transform: `scale(${zoomLevel.value})`,
|
||||||
height: `${100 / zoomLevel.value}vh`,
|
height: `${100 / zoomLevel.value}vh`,
|
||||||
|
transition: isZooming.value ? 'transform 0.3s ease' : 'none',
|
||||||
}));
|
}));
|
||||||
|
|
||||||
defineExpose({ zoomStyle });
|
defineExpose({ zoomStyle });
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue