32 lines
666 B
Vue
32 lines
666 B
Vue
<template>
|
|
<span>{{ formatted }}</span>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { DateTime } from "luxon";
|
|
import { Component, Prop, Vue } from "vue-property-decorator";
|
|
|
|
@Component
|
|
export default class Clock extends Vue {
|
|
public formatted = "";
|
|
private interval?: number;
|
|
|
|
@Prop({ required: true })
|
|
private readonly format!: string;
|
|
|
|
private update(): void {
|
|
this.formatted = DateTime.now()
|
|
.setLocale(navigator.language)
|
|
.toFormat(this.format);
|
|
}
|
|
|
|
public created(): void {
|
|
this.update();
|
|
this.interval = setInterval(this.update, 10000);
|
|
}
|
|
|
|
public beforeDestroy(): void {
|
|
clearInterval(this.interval);
|
|
}
|
|
}
|
|
</script>
|