首页技术正文

vue组件之时间组件

程序员光辉技术 2022年11月23日

0 收藏 972 点赞 4,306 浏览 1163 个字

效果图

主要有两个注意点，前面时分，通过定时器，1秒钟取一次，只要数据变了立刻让他展示，当然也可以1分钟取一次，我看了下定时器和真正的时间

其实有一定的偏差的，大约要1分多才会改变，所以我用了1秒取一次，后面自定义星期几

组件引用

传一个参数吧，要不就没意思了

组件编写

<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>