71 lines
1.6 KiB
Vue
71 lines
1.6 KiB
Vue
<template>
|
||
<div style="display: flex;align-items: center;" :style="{ 'height': containerHeight, 'margin':timeMargin +'px'}">
|
||
|
||
<p style="width:100%;margin:auto;">{{ nowDate }}</p>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {
|
||
element: {
|
||
type: Object,
|
||
default: null
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
nowDate: '', // 当前日期
|
||
nowWeek: '',
|
||
timer: null
|
||
}
|
||
},
|
||
computed: {
|
||
timeMargin() {
|
||
return this.element.style.time_margin
|
||
},
|
||
containerHeight() {
|
||
return 'calc(100% - ' + this.element.style.time_margin * 2 + 'px)'
|
||
}
|
||
},
|
||
mounted() {
|
||
this.currentTime()
|
||
},
|
||
// 销毁定时器
|
||
beforeDestroy() {
|
||
if (this.timer) {
|
||
clearInterval(this.timer) // 在Vue实例销毁前，清除时间定时器
|
||
}
|
||
},
|
||
methods: {
|
||
currentTime() {
|
||
this.timer = setInterval(this.formatDate, 500)
|
||
},
|
||
formatDate() {
|
||
const weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
|
||
let timeFormat = this.element.formatInfo.timeFormat
|
||
const showWeek = this.element.formatInfo.showWeek
|
||
const showDate = this.element.formatInfo.showDate
|
||
const dateFormat = this.element.formatInfo.dateFormat || 'yyyy-MM-dd'
|
||
if (showDate && dateFormat) {
|
||
timeFormat = dateFormat + ' ' + timeFormat
|
||
}
|
||
|
||
const date = new Date()
|
||
|
||
this.nowDate = date.format(timeFormat)
|
||
|
||
if (showWeek) {
|
||
this.nowWeek = weekArr[date.getDay()]
|
||
this.nowDate = this.nowDate + ' ' + this.nowWeek
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
|
||
</style>
|