From a191ee0f495760168aa776590793e72c9ecbda0d Mon Sep 17 00:00:00 2001
From: 刘嘉威 <daidaibg@163.com>
Date: 星期一, 24 十月 2022 15:56:08 +0800
Subject: [PATCH] perf: 增加设置弹窗 可设置是否进行自适应
---
src/components/scale-screen/scale-screen.vue | 53 ++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 44 insertions(+), 9 deletions(-)
diff --git a/src/components/scale-screen/scale-screen.vue b/src/components/scale-screen/scale-screen.vue
index 4420bab..d45fa9e 100644
--- a/src/components/scale-screen/scale-screen.vue
+++ b/src/components/scale-screen/scale-screen.vue
@@ -1,5 +1,9 @@
<template>
- <section :style="{ ...styles.box, ...boxStyle }" class="v-screen-box">
+ <section
+ :style="{ ...styles.box, ...boxStyle }"
+ class="v-screen-box"
+ ref="box"
+ >
<div
:style="{ ...styles.wrapper, ...wrapperStyle }"
class="screen-wrapper"
@@ -10,7 +14,7 @@
</section>
</template>
<script lang="ts" setup>
-import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue";
+import { nextTick, onMounted, onUnmounted, reactive, ref, watch } from "vue";
import type { CSSProperties, PropType } from "vue";
/**
* 闃叉姈鍑芥暟
@@ -19,7 +23,7 @@
* @returns {() => void}
*/
function debounce(fn: Function, delay: number): () => void {
- // let timer: NodeJS.Timeout;
+ // let timer: NodeJS.Timer;
let timer: any;
return function (...args: any[]): void {
if (timer) clearTimeout(timer);
@@ -105,11 +109,27 @@
};
const screenWrapper = ref<HTMLElement>();
+const box = ref<HTMLElement>();
+
+watch(
+ () => props.autoScale,
+ async (newVal: any) => {
+ if (newVal) {
+ onResize();
+ addListener();
+ } else {
+ clearListener();
+ clearScreenWrapperStyle();
+ }
+ }
+);
/**
* 鍒濆鍖栧ぇ灞忓鍣ㄥ楂�
*/
const initSize = () => {
return new Promise<void>((resolve) => {
+ box.value!.scrollLeft = 0;
+ box.value!.scrollTop = 0;
nextTick(() => {
// region 鑾峰彇澶у睆鐪熷疄灏哄
if (props.width && props.height) {
@@ -144,9 +164,14 @@
screenWrapper.value!.style.height = `${state.originalHeight}px`;
}
};
-
+const clearScreenWrapperStyle = () => {
+ screenWrapper.value!.style.transform = "";
+ screenWrapper.value!.style.margin = "";
+};
const autoScale = (scale: number) => {
- if (!props.autoScale) return;
+ if (!props.autoScale) {
+ return;
+ }
const domWidth = screenWrapper.value!.clientWidth;
const domHeight = screenWrapper.value!.clientHeight;
const currentWidth = document.body.clientWidth;
@@ -195,17 +220,27 @@
attributeOldValue: true,
});
};
+
+const clearListener = () => {
+ window.removeEventListener("resize", onResize);
+ // state.observer?.disconnect();
+};
+
+const addListener = () => {
+ window.addEventListener("resize", onResize);
+ // initMutationObserver();
+};
onMounted(() => {
nextTick(async () => {
await initSize();
updateSize();
updateScale();
- window.addEventListener("resize", onResize);
- initMutationObserver();
+ addListener();
+ // initMutationObserver();
});
});
onUnmounted(() => {
- window.removeEventListener("resize", onResize);
- state.observer?.disconnect();
+ clearListener();
+ // state.observer?.disconnect();
});
</script>
--
Gitblit v1.8.0