vue封装日历组件

//根组件
<template>
  <div class="hello">
      <Time v-model="value"></Time>
  </div>
</template>

<script>
import formate from '../utils/formate'
import Time from './Time'
export default {
  name: 'HelloWorld',
  data () {
    return {
     value:formate(new Date().getFullYear(),new Date().getMonth(),new Date().getDate())
    }
  },
  components:{
    Time:Time
  }
}
</script>


<style scoped>
.hello{color:red}
</style>

//utils
function formate(year,month,day){
    return year+'-'+(Number(month)+1)+'-'+day;
}

export default formate;


function getMonthDays(year,month){
    
    return new Date(year,month,1)
}
export default getMonthDays

//日历组件
<template>
    <div v-mouch>
    <input type="text" :value="value"/>
    <div class="head">
        <span @click="prevYear">&lt;&lt;</span>
        <span @click="prevMonth">&lt;</span>
        <span>{{select}}</span>
        <span @click="nextMonth">&gt;</span>
        <span @click="nextYear">&gt;&gt;</span>
    </div>
    <div v-if="visiable" class="time">
        <span v-for="(item,index) in day" :key="index">{{item}}</span>
        <span v-for="item in arr" :key="new Date(item).getTime()"
        @click="change(item)"
        class="date"
        :class="[new Date(item).getMonth()==new Date().getMonth()?'today':'last',
        selected(item)?'selected':''
        ]"
        :id="new Date(item).getDate()==new Date().getDate()?'day':''"
        >{{item.getDate()}}</span>
    </div>
    </div>
</template>
<script>
import get from '../utils/get'
export default {
    directives:{
        mouch:{
            bind(el,bindings,vnode){
                let handler=(e)=>{
                    if(el.contains(e.target)){
                        if(!vnode.context.visiable){
                            vnode.context.focus()
                        }}
                        else if(vnode.context.visiable){
                            
                            vnode.context.blur()
                        }
                    }
                    el.handler=handler
                    document.addEventListener('click',el.handler)
                },
                unbind(e){
                    document.removeEventListener('click',el.handler)
                }
            }
        
    },
    props:{
        value:String
    },
    data(){
        return {
            visiable:false,
            day:['日','一','二','三','四','五','六'],
            arr:[],
            select:new Date().getFullYear()+'年'+Number(new Date().getMonth()+1)+'月'
        }
    },
    methods:{
        focus(){
            this.visiable=true
        },
        blur(){
            this.visiable=false;
        },
        change(item){
            this.$emit('input',new Date(item).getFullYear()+'-'+Number(new Date(item).getMonth()+1)+'-'+new Date(item).getDate())
        var day=get(new Date(item).getFullYear(),new Date(item).getMonth())
         var week=day.getDay();
        var last=day-week*24*60*60*1000
        console.log(new Date(last));
        for(var i=0;i<42;i++){
            this.arr[i]=new Date(last+i*24*60*60*1000)
        }
        
        },
        selected(item){
            return this.value==(new Date(item).getFullYear()+'-'+Number(new Date(item).getMonth()+1)+'-'+new Date(item).getDate())
        },
        prevYear(){
        
         var item=this.select.split('年')
         //item[1]=item[1].split('月').join()
         item[1]=item[1].split('月')[0]
        item[0]=item[0]-1;
        this.select=item[0]+'年'+item[1]+'月'
        
        var day=get(item[0],item[1])
         var week=day.getDay();
        var last=day-week*24*60*60*1000
        this.arr=[]
        for(var i=0;i<42;i++){
            this.arr[i]=new Date(last+i*24*60*60*1000)
        }
        },
        prevMonth(){
        var item=this.select.split('年')
        console.log(item)
       item[1]=item[1].split('月')[0]
       if(item[1]==1){item[1]=12;
        item[0]=item[0]-1
       }else{
           item[1]=item[1]-1
       }
           this.select=item[0]+'年'+item[1]+'月'

             var day=get(item[0],item[1])
         var week=day.getDay();
        var last=day-week*24*60*60*1000
        this.arr=[]
        for(var i=0;i<42;i++){
            this.arr[i]=new Date(last+i*24*60*60*1000)
        }

        },
        nextYear(){
        var item=this.select.split('年')
        item[1]=item[1].split('月')[0]
         item[0]=Number(item[0])+1;
         this.select=item[0]+'年'+item[1]+'月'
        
         var day=get(item[0],item[1])
         var week=day.getDay();
        var last=day-week*24*60*60*1000
        this.arr=[]
        for(var i=0;i<42;i++){
            this.arr[i]=new Date(last+i*24*60*60*1000)
        }
        },
        nextMonth(){
            var item=this.select.split('年')
        item[1]=item[1].split('月')[0]
        console.log(item[1])
        if(item[1]==12){item[1]=1;
        item[0]=Number(item[0])+1
        }else{
            item[1]=Number(item[1])+1
        }
        
         this.select=item[0]+'年'+item[1]+'月'
       
        var day=get(item[0],item[1])
         var week=day.getDay();
        var last=day-week*24*60*60*1000
        this.arr=[]
        for(var i=0;i<42;i++){
            this.arr[i]=new Date(last+i*24*60*60*1000)
        }
        }
    },
    mounted(){
        var  day=get(new Date().getFullYear(),new Date().getMonth())
        console.log(day)
        var week=day.getDay();
        var last=day-week*24*60*60*1000
       
        for(var i=0;i<42;i++){
            this.arr[i]=new Date(last+i*24*60*60*1000)
        }
    }
  
    
}
</script>
<style scoped>

.time{width:420px;
     height:350px;
     display: grid;
     grid-template-columns: repeat(7,1fr);
     border:1px solid deeppink;
}
span{cursor: pointer;
    text-align: center;
    display: inline-block;
    line-height: 40px;
}

.last{color:gray}
.today{color:black;}
#day{border-radius: 30%;
    background-color: crimson;
}
.selected{border:1px solid crimson}
.date:hover{border:1px solid crimson}
</style>