update Slider

This commit is contained in:
DESKTOP-FUDKNA8\znjsz 2024-01-17 15:47:17 +08:00
parent 8d0aa21332
commit 7e2c6fe665
3 changed files with 34 additions and 22 deletions

View File

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

View File

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

View File

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