update Slider
This commit is contained in:
parent
8d0aa21332
commit
7e2c6fe665
11
src/App.vue
11
src/App.vue
@ -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>
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
|
||||||
|
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user