vuejs實現一個簡單的日期組件

介紹

學習使用了一段時間的vue。和以前的jQuery相比。編程體驗好了不少。嘗試動手寫一些簡單的組件。項目地址

組件解析

calendarLine組件

var calendarLine = Vue.extend({
        props:['items', 'cur', 'sel', 'month'],
        data(){
            return {}
        },
        template: `<tr>
                    <td v-for="item in items" v-bind:class="{'dp-last': month!= item.month, 'dp-today': cur == item.data, 'dp-select': sel == item.data}">
                        <span @click="click(item)">{{ item.day }}</span>
                    </td>
                   </tr>`,
        methods: {
            click(item){
                this.$dispatch('click', item.data)
            }
        }
    })

這個小組件是輸出日曆的一行，點擊的時候通知父組件。
calendar組件(主要的)

<div class="input-wrap">
                <input type="text" class="input middle-input" @focus="foc" v-model="sel">
            </div>
            <div class="dp" v-show="show">
                    <div class="dp-header"><a class="dp-h-1" @click="cy(-1)">«</a><a class="dp-h-2" @click="cm(-1)">‹</a>
                    <span class="dp-ym">{{y}}年 {{m}}月</span>
                     <a class="dp-h-3" @click="cm(1)">›</a><a class="dp-h-4" @click="cy(1)">»</a></div>
                    <table class="dp-table">
                    <thead>
                        <tr>
                            <th><span>一</span></th>
                            <th><span>二</span></th>
                            <th><span>三</span></th>
                            <th><span>四</span></th>
                            <th><span>五</span></th>
                            <th><span>六</span></th>
                            <th><span>日</span></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr is="calendar-line" v-for="cell in data" :items="cell" :month="m" :cur="cur" :sel="sel"></tr>
                    </tbody>
                    </table>
                    <div class="dp-footer"><a @click="clickNow">{{sel}}</a>  <span class="btn btn-ok" @click="show=false">肯定</span></div>
                </div>

關鍵看模版，這個組件接收一個date時間戳，本身生成當前時間，選擇時間等。