-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactorizar componente App.vue para mejorar rendimiento y seguir con…
…venciones de Vue 3
- Loading branch information
1 parent
3bf0b62
commit 4ca5f1e
Showing
4 changed files
with
92 additions
and
120 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,85 +1,64 @@ | ||
<script lang="ts"> | ||
import { defineComponent } from "vue"; | ||
<script lang="ts" setup> | ||
import { computed, onMounted, Ref, ref } from "vue"; | ||
import ClockDate from "./components/ClockDate.vue"; | ||
import ClockTime from "./components/ClockTime.vue"; | ||
export default defineComponent({ | ||
name: "ClockWidget", | ||
data() { | ||
return { | ||
day: 0, | ||
month: 0, | ||
year: 0, | ||
min: "00", | ||
hour: "00", | ||
seconds: "00", | ||
amPm: "AM", | ||
}; | ||
}, | ||
methods: { | ||
setTime() { | ||
const date = new Date(); | ||
let hour = date.getHours(); // 0 - 23 | ||
let min = date.getMinutes(); // 0 - 59 | ||
let seconds = date.getSeconds(); // 0 - 59 | ||
this.day = date.getDate(); | ||
this.month = date.getMonth() + 1; | ||
this.year = date.getFullYear(); | ||
const day: Ref<number> = ref(0); | ||
const month: Ref<number> = ref(0); | ||
const year: Ref<number> = ref(0); | ||
const min: Ref<string> = ref("00"); | ||
const hour: Ref<string> = ref("00"); | ||
const seconds: Ref<string> = ref("00"); | ||
const amPm: Ref<string> = ref("AM"); | ||
if (hour > 12) { | ||
hour = hour - 12; | ||
this.amPm = "PM"; | ||
} else { | ||
this.amPm = "AM"; | ||
} | ||
const setTime = () => { | ||
const date = new Date(); | ||
let dateHour = date.getHours(); // 0 - 23 | ||
let dateMin = date.getMinutes(); // 0 - 59 | ||
let dateSeconds = date.getSeconds(); // 0 - 59 | ||
day.value = date.getDate(); | ||
month.value = date.getMonth() + 1; | ||
year.value = date.getFullYear(); | ||
if (hour == 0) { | ||
hour = 12; | ||
} | ||
if (dateHour > 12) { | ||
dateHour = dateHour - 12; | ||
amPm.value = "PM"; | ||
} else { | ||
amPm.value = "AM"; | ||
} | ||
this.hour = hour < 10 ? `0${hour}` : `${hour}`; | ||
this.min = min < 10 ? `0${min}` : `${min}`; | ||
this.seconds = seconds < 10 ? `0${seconds}` : `${seconds}`; | ||
}, | ||
}, | ||
computed:{ | ||
cDay(): number{ | ||
return this.day | ||
}, | ||
cMonth(): number{ | ||
return this.month | ||
}, | ||
cYear(): number{ | ||
return this.year | ||
}, | ||
cHour(): string{ | ||
return this.hour | ||
}, | ||
cMin(): string{ | ||
return this.min | ||
}, | ||
cSeconds(): string{ | ||
return this.seconds | ||
}, | ||
cAmPm(): string{ | ||
return this.amPm | ||
} | ||
}, | ||
mounted() { | ||
setInterval(() => this.setTime(), 1000); | ||
}, | ||
components: { | ||
ClockDate, | ||
ClockTime, | ||
}, | ||
if (dateHour == 0) { | ||
dateHour = 12; | ||
} | ||
hour.value = dateHour < 10 ? `0${dateHour}` : `${dateHour}`; | ||
min.value = dateMin < 10 ? `0${dateMin}` : `${dateMin}`; | ||
seconds.value = dateSeconds < 10 ? `0${dateSeconds}` : `${dateSeconds}`; | ||
}; | ||
const cDay = computed(() => day.value); | ||
const cMonth = computed(() => month.value); | ||
const cYear = computed(() => year.value); | ||
const cHour = computed(() => hour.value); | ||
const cMin = computed(() => min.value); | ||
const cSeconds = computed(() => seconds.value); | ||
const cAmPm = computed(() => amPm.value); | ||
onMounted(() => { | ||
setInterval(() => setTime(), 1000); | ||
}); | ||
</script> | ||
|
||
<template> | ||
<div class="clock-warp"> | ||
<div class="clock-widget"> | ||
<div class="clock-position"> | ||
<div class="widget-frame clock-widget"> | ||
<ClockDate :day="cDay" :month="cMonth" :year="cYear" /> | ||
<ClockTime :hours="cHour" :minutes="cMin" :amPm="cAmPm" :seconds="cSeconds" /> | ||
<ClockTime | ||
:hours="cHour" | ||
:minutes="cMin" | ||
:amPm="cAmPm" | ||
:seconds="cSeconds" | ||
/> | ||
</div> | ||
</div> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,31 +1,28 @@ | ||
<script lang="ts"> | ||
import { defineComponent } from "vue"; | ||
<script lang="ts" setup> | ||
import { defineProps } from "vue"; | ||
export default defineComponent({ | ||
name: "ClockDate", | ||
props: { | ||
day: { | ||
type: Number, | ||
required: true, | ||
}, | ||
month: { | ||
type: Number, | ||
required: true, | ||
}, | ||
year: { | ||
type: Number, | ||
required: true, | ||
}, | ||
defineProps({ | ||
day: { | ||
type: Number, | ||
required: true, | ||
}, | ||
}); | ||
month: { | ||
type: Number, | ||
required: true, | ||
}, | ||
year: { | ||
type: Number, | ||
required: true, | ||
}, | ||
}) | ||
</script> | ||
|
||
<template> | ||
<div class="clock-date text-center"> | ||
<span class="clock-date-day">{{ day }}</span> | ||
<div class="clock-date"> | ||
<span>{{ day }}</span> | ||
<span>/</span> | ||
<span class="clock-date-month">{{ month }}</span> | ||
<span>{{ month }}</span> | ||
<span>/</span> | ||
<span class="clock-date-year">{{ year }}</span> | ||
<span>{{ year }}</span> | ||
</div> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,38 +1,35 @@ | ||
<script lang="ts"> | ||
import { defineComponent } from "vue"; | ||
<script lang="ts" setup> | ||
import { defineProps } from "vue"; | ||
export default defineComponent({ | ||
name: "ClockTime", | ||
props: { | ||
hours: { | ||
type: String, | ||
required: true, | ||
}, | ||
minutes: { | ||
type: String, | ||
required: true, | ||
}, | ||
seconds: { | ||
type: String, | ||
required: true, | ||
}, | ||
amPm: { | ||
type: String, | ||
required: true, | ||
}, | ||
defineProps({ | ||
hours: { | ||
type: String, | ||
required: true, | ||
}, | ||
minutes: { | ||
type: String, | ||
required: true, | ||
}, | ||
seconds: { | ||
type: String, | ||
required: true, | ||
}, | ||
amPm: { | ||
type: String, | ||
required: true, | ||
}, | ||
}); | ||
</script> | ||
|
||
<template> | ||
<div class="clock-time text-center"> | ||
<span class="clock-time-hours">{{ hours }}</span> | ||
<div class="clock-time"> | ||
<span>{{ hours }}</span> | ||
<span>:</span> | ||
<span class="clock-time-minutes">{{ minutes }}</span> | ||
<span>{{ minutes }}</span> | ||
<span>:</span> | ||
<div class="clock-time-box"> | ||
<span class="clock-time-am-pm">{{ amPm }}</span> | ||
<span class="clock-time-seconds">{{ seconds }}</span> | ||
<span>{{ amPm }}</span> | ||
<span>{{ seconds }}</span> | ||
</div> | ||
</div> | ||
</template> |