renames
This commit is contained in:
parent
cd2cf8ca08
commit
0a19286261
2 changed files with 11 additions and 12 deletions
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>{{ clock }}</div>
|
||||
<div>{{ formatted }}</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
@ -7,23 +7,22 @@ import { Component, Prop, Vue } from "vue-property-decorator";
|
|||
import { DateTime } from "luxon";
|
||||
|
||||
@Component
|
||||
export default class ClockDisplay extends Vue {
|
||||
private clock = "";
|
||||
export default class Clock extends Vue {
|
||||
private formatted = "";
|
||||
private interval?: number;
|
||||
|
||||
@Prop()
|
||||
format!: string;
|
||||
public format!: string;
|
||||
|
||||
private created(): void {
|
||||
public created(): void {
|
||||
this.interval = setInterval((): void => {
|
||||
this.clock = DateTime.now()
|
||||
this.formatted = DateTime.now()
|
||||
.setLocale(navigator.language)
|
||||
.toFormat(this.format);
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
private beforeDestroy(): void {
|
||||
// prevent memory leak
|
||||
public beforeDestroy(): void {
|
||||
clearInterval(this.interval);
|
||||
}
|
||||
}
|
|
@ -3,19 +3,19 @@
|
|||
<v-spacer />
|
||||
|
||||
<v-col>
|
||||
<ClockDisplay format="DDD" />
|
||||
<ClockDisplay format="T" />
|
||||
<Clock format="DDD" />
|
||||
<Clock format="T" />
|
||||
</v-col>
|
||||
</v-toolbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Component, Vue } from "vue-property-decorator";
|
||||
import ClockDisplay from "./ClockDisplay.vue";
|
||||
import Clock from "./Clock.vue";
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
ClockDisplay,
|
||||
Clock,
|
||||
},
|
||||
})
|
||||
export default class TitleBar extends Vue {}
|
||||
|
|
Loading…
Reference in a new issue