vue.js實現(xiàn)日歷插件使用方法詳解

更新時間：2021年09月03日 13:01:40 作者：laihaodong

這篇文章主要為大家詳細介紹了vue.js模擬日歷插件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

今天要實現(xiàn)的功能就是以下這個功能：vue.js模擬日歷插件

好了廢話不多說了直接上代碼了

css:

*{
     margin: 0;
     padding: 0;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
        }
        #app{
            width: 1000px;
            margin: 10px auto;
        }
        .calender{
            width: 1000px;
        }
        .calender table{
            width: 1000px;
        }
        .calender table,th,tr,td{
            border:1px solid #333333;
            border-collapse: collapse;
        }
        .calender td{
            height: 100px;
            vertical-align: top;
            text-align: left;
            padding: 5px 0 0 5px;
            font-size: 13px;
        }
        .calender td.cur{
            color:red;
        }

html:

<div id="app">
    <div class="calender">
        <table>
            <caption>
                <select v-model.number="year">
                    <option v-for="i of 490">{{i+1969}}</option>
                </select>
                <select v-model.number="month">
                    <option v-for="i of 12">{{i}}</option>
                </select>
            </caption>
            <thead>
            <tr>
                <th>周日</th>
                <th>周一</th>
                <th>周二</th>
                <th>周三</th>
                <th>周四</th>
                <th>周五</th>
                <th>周六</th>
            </tr>
            </thead>
            <tbody>
            <!--index 從0開始 i從1開始-->
            <tr v-for="(a,index) of calender.length / 7" >
                <td v-for="i of 7" :class="{cur:calender[index * 7 + (i - 1)].cur }">{{calender[index * 7 + (i - 1)].fullDay}}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

js:

var vm = new Vue({
        el:'#app',
        data:{
            year:2018,
            month:1
        },
        computed:{
            calender(){
                var arr = [];

                //new data 有三個參數(shù): 1,年 2.月 3.默認是1 如果是0,表示上個月最后一天 - 前兩天 3 后天
                var nowMonthLength = new Date(this.year,this.month,0).getDate();
                var nowMonthFirstWeek = new Date(this.year,this.month-1).getDay();
                var lastMonthLength = new Date(this.year,this.month-1,0).getDate();
                console.log('本月有:'+nowMonthLength);
                console.log('本月第一天'+nowMonthFirstWeek);
                console.log('上個月長度'+lastMonthLength);

                // this.month = parseInt(this.month);
                //每個月的上一個月是哪一年的那一個月
                var pmonth = this.month == 1 ? 12 : this.month - 1;
                //上一年
                var pyear = this.month == 1 ? this.year - 1 :this.year;
                //下一月
                var nmonth = this.month == 12 ? 1 : this.month + 1;
                //下一月
                var nyear = this.month == 12 ? this.year + 1 : this.year;
                //補零函數(shù)
                // function toTwo(n) {
                //     return n < 10 ? '0' + n : n;
                // }
                function buling(n) {
                    return n.toString().length > 1 ? n.toString() : '0' + n.toString();
                }
                // 補充上個月的最后幾天
                while(nowMonthFirstWeek--){
                    arr.unshift({
                        day:lastMonthLength,
                        cur:true,
                        fullDay:`${pyear}-${buling(pmonth)}-${buling(lastMonthLength)}`
                    });
                    lastMonthLength--
                }
                console.log(arr);

                //本月天數(shù)
                var _a = 1;
                while(nowMonthLength--){
                    arr.push({
                        day:_a,
                        cur:false,
                        fullDay:`${this.year}-${buling(this.month)}-${buling(_a)}`
                    });
                    _a++
                }

                //下個月補全
                var nextLength = arr.length > 35 ? 42 - arr.length : 35 - arr.length;
                _a = 1;
                while (nextLength--){
                    arr.push({
                        day:_a,
                        cur:true,
                        fullDay:`${nyear}-${buling(nmonth)}-${buling(_a)}`
                    });
                    _a++
                }
                return arr;
            }
        }
    })

注意:需要先引入你本地的vue.js文件，才能正常運行哦!!!

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: