update Slider

src/App.vue

@@ -1,12 +1,12 @@
 <script setup>
-import { ref, watch, computed } from "vue";
+import { ref, onMounted } from "vue";
 import MainPage from "./MainPage.vue";
 import Slider from "./components/Slider.vue";
 import Client from "./utils/ws";
 import { useWsStore } from "./store";
 
 const store = useWsStore();
- 
+
 const url = "ws://192.168.1.101:8082/QbMonitoring/websocket";
 let urlPath = document.location.pathname;
 if (urlPath === "/") {
@@ -41,6 +41,11 @@ new Client(
   }
 );
 
+const size = ref(80);
+onMounted(() => {
+  setSize(size.value);
+});
+
 const styles = ref({});
 function setSize(value) {
   const v = (value / 100).toFixed(2);
@@ -56,7 +61,7 @@ function setSize(value) {
 <template>
   <div id="app-container">
     <MainPage :style="styles" />
-    <Slider @size-change="setSize" />
+    <Slider :size="size" @size-change="setSize" />
   </div>
 </template>
 

src/components/Slider.vue

@@ -1,34 +1,42 @@
 <script setup>
-import { ref, watch, onMounted } from 'vue';
+import { ref, watch, computed, onMounted } from "vue";
+const props = defineProps({
+  size: {
+    type: Number,
+    default: 60,
+  },
+});
+const emit = defineEmits(["size-change"]);
 
-const emit = defineEmits(['size-change']);
-const size = ref(100);
 const slider = ref(null);
+const innerSize = ref(props.size);
 
-// watchers
-watch(size, (value) => {
-  if (value == null) return;
-  emit('size-change', value);
-});
+// watch
+watch(
+  () => innerSize.value,
+  (value) => {
+    emit("size-change", value);
+  }
+);
 
 // handlers
 function keydownHandler(e) {
-  if (e.shiftKey && e.key === 'L') {
+  if (e.shiftKey && e.key === "L") {
     if (slider.value) {
-      slider.value.classList.toggle('show');
+      slider.value.classList.toggle("show");
     }
   }
 }
 
 // hooks
 onMounted(() => {
-  document.addEventListener('keydown', keydownHandler);
+  document.addEventListener("keydown", keydownHandler);
 });
 </script>
 
 <template>
   <div ref="slider" class="slider">
-    <input type="range" min="0" max="100" v-model="size" />
+    <input type="range" min="0" max="100" v-model="innerSize" />
   </div>
 </template>
 

src/pages/AnnouncementPage.vue

@@ -10,15 +10,14 @@ const horizontal_content = ref("公告加载中...");
 const store = useWsStore();
 store.$subscribe((mutation, state) => {
   vertical_content.value =
-    (state.data3.deliveryNotification || []).map(
-      (item) => item.deliveryContent || ""
-    ).join('').replaceAll(/<br(\s?)\/>/g, '') || "暂无公告";
+    (state.data3.deliveryNotification || [])
+      .map((item) => item.deliveryContent || "")
+      .join("")
+      .replaceAll(/<br(\s?)\/>/g, "") || "暂无公告";
   horizontal_content.value =
     (state.data2.deliveryMsg || [])
       .map((item) => item.deliveryContent || "")
       .join("\t") || "暂无公告";
-
-  console.log('vertical_content.value', vertical_content.value)
 });
 
 // handlers