效果图
主要有两个注意点,前面时分,通过定时器,1秒钟取一次,只要数据变了立刻让他展示,当然也可以1分钟取一次,我看了下定时器和真正的时间
其实有一定的偏差的,大约要1分多才会改变,所以我用了1秒取一次,后面自定义星期几
组件引用
<datetime></datetime>
传一个参数吧,要不就没意思了
<datetime :styleObj="{color:'#fff',font-size:'46px'}"></datetime>
组件编写
<template>
<div class="date-info" :style="styleObj">
<div class="date-info__left">{{time}}</div>
<div class="date-info__right">
<div>{{date}}</div>
<div>{{day}}</div>
</div>
</div>
</template>
<script>
import moment from 'moment';
export default{
props:{
styleObj:{
required:false,
type:Object
}
},
data(){
return{
time:'',
date:'',
day:'',
timeInterval:null
}
},
created(){
const momentNow=moment();
this.date=momentNow.format('YYYY-MM-DD');
const dayNameMapping=[
'星期日','星期一','星期二','星期三','星期四','星期五','星期六'
];
console.log("dsadas",momentNow.format('e'));
this.day=dayNameMapping[momentNow.format('e')];
this.updateTime();
},
methods:{
updateTime(){
const _this=this;
this.timeInterval=setInterval(function(){
_this.time=moment().format('HH:mm');
},1000);
}
}
}
</script>
<style lang="scss" scoped>
.date-info {
float: right;
padding-right: 30px;
& > * {
display: inline-block;
vertical-align: middle;
}
.date-info__left {
font-size: 64px;
margin-right: 5px;
}
.date-info__right {
font-size: 20px;
line-height: 1.5em;
}
}
</style>
很简单就不多说了