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时间戳，自己生成当前时间，选择时间等。