zoukankan      html  css  js  c++  java
  • vue组件之时间组件

    效果图

    主要有两个注意点,前面时分,通过定时器,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>

    很简单就不多说了

  • 相关阅读:
    罗马数字
    逆序对
    等价串
    郊区春游
    贝壳找房函数最值
    Educational Codeforces Round 45 Editorial
    Codeforces Round #486 (Div. 3)
    checkbox保存和赋值
    oninput和onchange的区别
    cookie路径概念理解
  • 原文地址:https://www.cnblogs.com/zhihou/p/9698548.html
Copyright © 2011-2022 走看看