Hide_D
4f4533e533
- eslint에 prettier 조합 - prettierrc에 width 120, tabWidth 2 - gameStor->map_theme 제거 - map_theme, mapTheme를 GameConst::$mapName으로 대체 - eslint에서 vue/vue3-essential 대신 vue3-recommended 적용 - vue/max-attributes-per-line 완화 - vue/v-on-event-hyphenation 해제 - vue/attribute-hyphenation 해제 - 일부 tsc import type warning 해결 - 일부 vue template type warning 해결 - 일부 vue SFC를 script setup으로 변경 - TipTap - TopBackBar - BottomBackBar - BoardArticle - ProcessCity
47 lines
1.0 KiB
Vue
47 lines
1.0 KiB
Vue
<template>
|
|
<span class="time-zone">{{ serverNow }}</span>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { addMilliseconds } from "date-fns";
|
|
import { type PropType, ref, onMounted, watch } from "vue";
|
|
import { formatTime } from "@/util/formatTime";
|
|
const props = defineProps({
|
|
serverTime: {
|
|
type: Object as PropType<Date>,
|
|
required: false,
|
|
default: new Date(),
|
|
},
|
|
timeFormat: {
|
|
type: String,
|
|
required: false,
|
|
default: "HH:mm:ss",
|
|
},
|
|
});
|
|
|
|
const timeDiff = ref(0);
|
|
const serverNow = ref("");
|
|
|
|
watch(
|
|
() => props.serverTime,
|
|
(newValue) => {
|
|
const clientNow = new Date();
|
|
timeDiff.value = newValue.getTime() - clientNow.getTime();
|
|
}
|
|
);
|
|
|
|
function updateNow() {
|
|
const serverNowObj = addMilliseconds(new Date(), timeDiff.value);
|
|
serverNow.value = formatTime(serverNowObj, props.timeFormat);
|
|
setTimeout(() => {
|
|
updateNow();
|
|
}, 1000 - serverNowObj.getMilliseconds());
|
|
}
|
|
|
|
onMounted(() => {
|
|
const clientNow = new Date();
|
|
timeDiff.value = props.serverTime.getTime() - clientNow.getTime();
|
|
updateNow();
|
|
});
|
|
</script>
|