• vue自己封装日历控件


    废话不多说先上效果图:

    点击头部年月部分可以选择日期。左右按钮可以切换月份。(蓝色标记为特定需要处理的日期)
    DateTools.vue 代码部分:

    <template>
        <div class="date-tools">
            <div class="date-years">
                <button class="date-btn date-left" @click="subMonth()"><</button>
                <button class="date-middle" @click="selectYM()">{{panelYear}}年{{panelMonth+1}}月</button>
                <button class="date-btn date-right" @click="addMonth()">></button>
            </div>
            <div class="date-weeks">
                <span>日</span>
                <span>一</span>
                <span>二</span>
                <span>三</span>
                <span>四</span>
                <span>五</span>
                <span>六</span>
            </div>
            <div class="date-days">
                <template v-for="(day,index) in dayFullList">
                <button v-if="day!=0">
                    <a href="javascript:void(0);" v-if="(trainDateFullList.includes(day))" class="active" @click="getCurrentDay(day)">{{day | filterDay}} </a>
                    <a href="javascript:void(0);" v-else>{{day | filterDay}} </a>
                </button>
                <button v-else>
                    <a href="javascript:void(0);" style="opacity:0;">{{day}} </a>
                </button>
                </template>
            </div>
            <!-- 年月下拉框 -->
            <div class="drop-down-ym" v-if="showDropDownYM">
                <div class="drop-down-y">
                    <a href="javascript:void(0);" v-for="(item,index) in yearList" @click="selectY(item)">{{item}}</a>
                </div>
                <div class="drop-down-m">
                    <a href="javascript:void(0);" v-for="(item,index) in monthList" @click="selectM(item-1)">{{item}}</a>
                </div>
            </div>
        </div>
    </template>
    
    <script>
        export default ({
            props: ['dateToolsKey','trainDateList','trainDateFullList'],
            data(){
                return {
                    yearList:[2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019,2020,2021,2022],
                    monthList:[1,2,3,4,5,6,7,8,9,10,11,12],
                    weekList:[],
                    dayList:[],//所有的天数列表,前面空位补0
                    dayFullList:[],//所有的天数列表,前面空位补0
                    panelYear:'',//仪表盘显示的年
                    panelMonth:'',//仪表盘显示的月(从0开始)
                    panelDay:'',//仪表盘显示的天(从1开始)
                    firstDay:'',//每月第一天
                    lastDay:'',//每月最后一天也即每月多少天
                    firstDayisWhat:'',//第一天星期几0-6(星期日到星期六)
                    showDropDownYM:false,
                }
            },
            filters:{
                filterDay(value){
                    return parseInt(value.slice(-2));
                }
            },
            methods:{
                dateInit(year=(new Date()).getFullYear(),month=(new Date()).getMonth()){
                    let self = this;
                    let y = year;
                    let m = month;
                    self.panelYear = year;
                    self.panelMonth = month;
                    self.firstDay = (new Date(y,m,1)).getDate();//每月第一天
                    self.lastDay = (new Date(y,m+1,0)).getDate();//每月最后一天也即每月多少天
                    self.firstDayisWhat = (new Date(y,m,1)).getDay();//第一天星期几0-6(星期日到星期六)
                    let beginTmp = new Array(self.firstDayisWhat).fill(0);//初始化长度为3的数组并填充0
                    let lastTmp = [];//初始化长度为当月天数的数组并填充为0-30或0-31
                    let lastFullTmp = [];//初始化完整的月的每天格式为年月日20180627
                    for (let i=1;i<=self.lastDay;i++){
                        lastTmp.push(i);
                        lastFullTmp.push(''+self.panelYear+self.addPreZero(self.panelMonth+1)+self.addPreZero(i));
                    }
                    self.dayList=[...beginTmp,...lastTmp];//用结构的方式生成新日期数组
                    self.dayFullList = [...beginTmp,...lastFullTmp];//用结构的方式生成年月日完整的新日期数组
                },
                subMonth(){
                    let self = this;
                    if(self.panelMonth>0){
                        self.panelMonth--;
                    }
                },
                addMonth(){
                    let self = this;
                    if(self.panelMonth<11){
                        self.panelMonth++;
                    }
                },
                getCurrentDay(currentDay){
                    this.panelDay = currentDay;
                },
                selectYM(){
                    let self = this;
                    self.showDropDownYM = true;
                },
                selectY(year){
                    let self = this;
                    self.panelYear = year;
                },
                selectM(month){
                    let self = this;
                    self.panelMonth = month;
                    self.showDropDownYM=false;
                },
                addPreZero(num){//小于9的需要添加0前缀
                    return (num>9) ? num:('0'+num);
                },
                removePreZero(num){//小于9的需要去除0前缀
                    return parseInt(num);
                }
            },
            watch: {
                panelMonth(newVal,oldVal){//检测月份变化
                    this.dateInit(this.panelYear,this.panelMonth);
                },
                panelYear(newVal,oldVal){//检测年份变化
                    this.dateInit(this.panelYear,this.panelMonth);
                },
                panelDay(newVal,oldVal){//检测具体日期变化
                    this.$emit('topDateEvent'+this.dateToolsKey,newVal);
                }
            },
            mounted(){
                this.dateInit();
            }
        })
    </script>
    
    <style scoped>
    button{
        background-color:#fff;
        cursor:pointer;
    }
    .date-btn,.date-middle{
        color:#333!important;
    }
    .date-tools{
        position:relative;
        /* margin-top:80px; */
        display:inline-block;
        310px;
        height:272px;
        overflow: hidden;
        border:1px solid #eee;
    }
    .date-btn{
        34px;
        height:34px;
        border-radius:50%;
    }
    .date-btn:hover{
        color:#fff;
        background-color:#0A81E5;
        opacity:0.6;
    }
    .date-years{
        margin:14px 20px 0 20px;
        display:flex;
        justify-content:space-between;
    }
    .date-weeks{
        display: flex;
        justify-content:space-between;
    }
    .date-weeks span{
        display:inline-block;
        44px;
        height:34px;
        line-height:34px;
        text-align:center;
    }
    .date-days{
        /* margin-top:14px; */
    }
    .date-days button{
        display: inline-block;
        44px;
        height:36px;
        background-color:#fff;
    }
    .date-days a{
        color:#000;
        display:inline-block;
        34px;
        height:34px;
        line-height:34px;
        border-radius:50%;
        text-align:center;
    }
    .date-days a.active{
        cursor:pointer;
        color:#fff;
        background-color:#0A81E5;
    }
    .date-days a:hover{
        color:#fff;
        background-color:#0A81E5;
        opacity:0.6;
    }
    
    .drop-down-ym{
        position:absolute;
        top:0;
        left:0;
        310px;
        height:272px;
        background-color:rgba(255,255,255,0.9);
        display: flex;
        justify-content:space-between;
    }
    .drop-down-y,.drop-down-m{
        155px;
        height:272px;
        overflow:auto;
        padding:5px;
        /* display: flex;
        flex-direction:column; */
    }
    .drop-down-y::-webkit-scrollbar,.drop-down-m::-webkit-scrollbar{
        display: none;
    }
    .drop-down-y{
        
    }
    .drop-down-m{
        
    }
    .drop-down-y a,.drop-down-m a{
        color:#000;
        text-align:center;
        display: inline-block;
        100%;
        height:30px;
        line-height:30px;
        font-size:18px;
        margin:0 0 5px 0;
    }
    .drop-down-y a:hover,.drop-down-m a:hover{
        color:#fff;
        background-color:rgba(10, 130, 229, 0.774);
        border-radius:5px;
    }
    .drop-down-y a.active,.drop-down-m a.active{
        color:#fff;
        background-color:#0A81E5;
        border-radius:5px;
    }
    </style>

    引用方式为:

    <dateTools
    :dateToolsKey="2"  (每个日历控件特定的key值,如果key值一样,易发生css的样式冲突)
    :trainDateList="trainDateList2"  (需要特定操作的日期部分,可以直接传日期数组(1-30)例如[12,17,30])
    :trainDateFullList="trainDateFullList"  (需要特定操作的完整日期部分,可以直接传日期数组(1-30)例如['20180102','20120312'])
    ref="topDateTools2"      (refs名)
    @topDateEvent2="topDateFun2"  (子组件可以操作父组件的方法‘topDateFun2’)
    ></dateTools>
  • 相关阅读:
    游戏方案
    团队介绍
    【面向对象程序设计】作业四
    FIFO与LRU实现(Java)
    spring事务介绍
    微信抢红包算法
    Hibernate Dao映射配置通用接口类反射获取加载calass实例
    股票两次买卖最大收益(java)
    Eclipse安装JD-Eclipse反编译插件看源码
    Java GC调优
  • 原文地址:https://www.cnblogs.com/sdorm/p/9238353.html
Copyright © 2020-2023  润新知