当前位置：移动技术网 > IT编程>开发语言>JavaScript > vue之手把手教你写日历组件

vue之手把手教你写日历组件

2019年08月10日 | 移动技术网IT编程 | 我要评论

---恢复内容开始---

1.日历组件

1.分析功能：日历基本功能，点击事件改变日期，样式的改变

1.结构分析：html

1.分为上下两个部分

2.上面分为左按钮，中间内容展示，右按钮

下面分为周几展示和日期展示

3.基本结构页面html书写

<template>
    <div class="calender2">
        <div class="date-header">
            <div class="pre-month"></div>
            <div class="show-date">2019年8月9日</div>
            <div class="next-month"></div>
        </div>
        <div class="date-content">
            <div class="week-header">
                <div 
                v-for="item in ['日','一','二','三','四','五','六']"
                :key= item
                >{{ item }}</div>
            </div>
            <div class="week-day">
                <div 
                class="every-day"
                v-for="item in 42"
                :key="item"
                >{{ item }}</div>
            </div>
        </div>
    </div>
</template>

*{
    margin: 0px;
    border: 0px;
    list-style: none;
}
.calender2{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    height:380px;
    width:420px;
    border: 1px solid #ccc;
}
.date-header{
    margin-left: 10px;
    height: 40px;
    width: 350px;
    line-height: 40px;
    text-align: center;
}
.pre-month{
    position: absolute;
    display: inline-block;
    height: 0px;
    width:0px;
    border:20px solid ;
    border-color: transparent rgb(35, 137, 206) transparent transparent;
}
.next-month{
    position: absolute;
    display: inline-block;
    height: 0px;
    width:0px;
    border:20px solid ;
    border-color: transparent transparent transparent  rgb(35, 137, 206);
}
.show-date{
    margin-left: 40px;
    margin-top: 0px;
    display: inline-block;
    line-height: 40px;
    text-align: center;
    width: 310px;
    color: rgb(35, 137, 206);
}
.week-header{
    background: rgb(35, 137, 206);
    color: #fff;
    font-size: 14px;
    text-align: center;
    line-height: 20px;
}
.week-header div{
    margin: 0;
    padding: 0;
    display: inline-block;
    height: 20px;
    width: 60px;
}
.every-day{
    display: inline-block;
    height: 50px;
    width: 60px;
    text-align: center;
    line-height: 50px;
}
.other-day{
    color: #ccc;
}
.now-day{
    background: rgb(35, 137, 206);
}
.active-day{
    /* padding: 2px */
    /* border-sizing:content-box; */
    border: 2px solid rgb(35, 137, 206);
}
</style>

4.一些事件以及逻辑

1.使得当前的日期为今天的日期

            <div class="show-date">{{ year }}年{{ month }}月{{ day }}日</div>

data(){
        return{
            year:null,
            month:null,
            day:null
        }
    },
    created(){
        this.getinitdate();
    },
    methods:{
        getinitdate(){
            const date = new date();
            this.year = date.getfullyear();
            this.month = date.getutcmonth() + 1;
            this.day = date.getdate();
        }
    }

2.设置该月日期起始值（找到一号是在哪里）

beginday(){
    return new date(this.year, this.mounth - 1, 1).getday();
}

3.当月天数字体正常显示

<div 
v-if="item - beginday >= 0 && item - beginday <= curdays"
>{{ item - beginday }}</div>

4.当月天数之前的部分变灰，外加正常显示日期

注意几个数学问题：

1.当前月天数日期

2.上月剩余天数

3.此月显示的下月天数

<div 
     v-if="item - beginday > 0 && item - beginday <= curdays"
     >{{ item - beginday }}</div>
<div 
     class="other-day" 
     v-else-if="item - beginday <= 0"
     >{{ item - beginday + prevdays }}</div>
<div 
     class="other-day" 
     v-else>{{ item - beginday -curdays }}</div>

5.能知道当前日期，能点击其他日期，并且会有相应的变化

知道当前日期：

 this.curdate = `${this.year}-${this.month}-${this.day}`

判断今天是不是当前日期，并且给一个样式：

'now-day':`${year}-${month}-${item - begindays}` == curdate

当点击当月有的日期的时候会根据你的点击显示的日期发生变化

判断是点击的那一天：

'active-day':`${year}-${month}-${item - beginday}` === `${year}-${month}-${day}`

点击这一天，绑定点击事件

@click="handleclickday(item - beginday)"

handleclickday(day){
    this.day = day
}

6.前后两个按钮的功能

            <div class="pre-month" @click="handleprev"></div>
            <div class="next-month" @click="handlenext"></div>

handleprev(){
            if(this.month == 1){
                this.month = 12
                this.year--
            }else{
                this.month--
            }
        },
        handlenext(){
            if(this.month == 12){
                this.month = 1
                this.year++
            }else{
                this.month++
            }
        }

7.判断点击的是否为当月的最后一天

computedday(){
            const allday = new date(this.year, this.month, 0).getdate();
            if(this.day > allday){
                this.day = allday;
            }
        }

将这个函数分别在handleprev(),handlenext()里面执行-------注意是this.computedday();

完成

---恢复内容结束---

1.日历组件

1.分析功能：日历基本功能，点击事件改变日期，样式的改变

1.结构分析：html

1.分为上下两个部分

2.上面分为左按钮，中间内容展示，右按钮

下面分为周几展示和日期展示

3.基本结构页面html书写

<template>
    <div class="calender2">
        <div class="date-header">
            <div class="pre-month"></div>
            <div class="show-date">2019年8月9日</div>
            <div class="next-month"></div>
        </div>
        <div class="date-content">
            <div class="week-header">
                <div 
                v-for="item in ['日','一','二','三','四','五','六']"
                :key= item
                >{{ item }}</div>
            </div>
            <div class="week-day">
                <div 
                class="every-day"
                v-for="item in 42"
                :key="item"
                >{{ item }}</div>
            </div>
        </div>
    </div>
</template>

*{
    margin: 0px;
    border: 0px;
    list-style: none;
}
.calender2{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    height:380px;
    width:420px;
    border: 1px solid #ccc;
}
.date-header{
    margin-left: 10px;
    height: 40px;
    width: 350px;
    line-height: 40px;
    text-align: center;
}
.pre-month{
    position: absolute;
    display: inline-block;
    height: 0px;
    width:0px;
    border:20px solid ;
    border-color: transparent rgb(35, 137, 206) transparent transparent;
}
.next-month{
    position: absolute;
    display: inline-block;
    height: 0px;
    width:0px;
    border:20px solid ;
    border-color: transparent transparent transparent  rgb(35, 137, 206);
}
.show-date{
    margin-left: 40px;
    margin-top: 0px;
    display: inline-block;
    line-height: 40px;
    text-align: center;
    width: 310px;
    color: rgb(35, 137, 206);
}
.week-header{
    background: rgb(35, 137, 206);
    color: #fff;
    font-size: 14px;
    text-align: center;
    line-height: 20px;
}
.week-header div{
    margin: 0;
    padding: 0;
    display: inline-block;
    height: 20px;
    width: 60px;
}
.every-day{
    display: inline-block;
    height: 50px;
    width: 60px;
    text-align: center;
    line-height: 50px;
}
.other-day{
    color: #ccc;
}
.now-day{
    background: rgb(35, 137, 206);
}
.active-day{
    /* padding: 2px */
    /* border-sizing:content-box; */
    border: 2px solid rgb(35, 137, 206);
}
</style>

4.一些事件以及逻辑

1.使得当前的日期为今天的日期

            <div class="show-date">{{ year }}年{{ month }}月{{ day }}日</div>

data(){
        return{
            year:null,
            month:null,
            day:null
        }
    },
    created(){
        this.getinitdate();
    },
    methods:{
        getinitdate(){
            const date = new date();
            this.year = date.getfullyear();
            this.month = date.getutcmonth() + 1;
            this.day = date.getdate();
        }
    }

2.设置该月日期起始值（找到一号是在哪里）

beginday(){
    return new date(this.year, this.mounth - 1, 1).getday();
}

3.当月天数字体正常显示

<div 
v-if="item - beginday >= 0 && item - beginday <= curdays"
>{{ item - beginday }}</div>

4.当月天数之前的部分变灰，外加正常显示日期

注意几个数学问题：

1.当前月天数日期

2.上月剩余天数

3.此月显示的下月天数

<div 
     v-if="item - beginday > 0 && item - beginday <= curdays"
     >{{ item - beginday }}</div>
<div 
     class="other-day" 
     v-else-if="item - beginday <= 0"
     >{{ item - beginday + prevdays }}</div>
<div 
     class="other-day" 
     v-else>{{ item - beginday -curdays }}</div>

5.能知道当前日期，能点击其他日期，并且会有相应的变化

知道当前日期：

 this.curdate = `${this.year}-${this.month}-${this.day}`

判断今天是不是当前日期，并且给一个样式：

'now-day':`${year}-${month}-${item - begindays}` == curdate

当点击当月有的日期的时候会根据你的点击显示的日期发生变化

判断是点击的那一天：

'active-day':`${year}-${month}-${item - beginday}` === `${year}-${month}-${day}`

点击这一天，绑定点击事件

@click="handleclickday(item - beginday)"

handleclickday(day){
    this.day = day
}

6.前后两个按钮的功能

            <div class="pre-month" @click="handleprev"></div>
            <div class="next-month" @click="handlenext"></div>

handleprev(){
            if(this.month == 1){
                this.month = 12
                this.year--
            }else{
                this.month--
            }
        },
        handlenext(){
            if(this.month == 12){
                this.month = 1
                this.year++
            }else{
                this.month++
            }
        }

7.判断点击的是否为当月的最后一天

computedday(){
            const allday = new date(this.year, this.month, 0).getdate();
            if(this.day > allday){
                this.day = allday;
            }
        }

将这个函数分别在handleprev(),handlenext()里面执行-------注意是this.computedday();

完成

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

JS--常见面试题整理(附答案）

一.JS面试题1.当a=?时，可以让a同时满足a1,a2,a==3,并输出ok方法一let a=[1,2,3];... [阅读全文]
javascript的短路机制和几种数值取整的方法

1. javascript的短路机制1.1 且运算符（&&）往往用于多个表达式的求值。它的运算规... [阅读全文]
jQuery50个选择器,让你得心应手

jQuery一:概念一个简单的js组件(是一个别人写好的js文件不是jar包)引入jQuery文件<scr... [阅读全文]
JavaScript 好题汇总分享（持续更新，看到好题就写）

前言本文搜集的题目，均来自各大网课、面试题等预编译相关1a = 100;function demo(e) {fu... [阅读全文]
JS中的原型与原型链图解

原型每一个构造器（函数）上面都有一个属性叫prototype，称为原型。它的值是一个对象，这个对象我们称为原型对... [阅读全文]
XMLHttpRequest 2级 &&进度事件&&JSONP

XMLHttpRequest 2级FormDataFormData 为序列化表单以及创建与表单格式相同的数据（... [阅读全文]
XMLHttpRequest对象

AJAX简介AJAX = 异步 JavaScript 和 XML；是一种用于创建快速动态网页的技术。通过在... [阅读全文]
mock入门学习

mockjs入门学习,自动生成数据官网入口：http://mockjs.com/安装：npm i mockjs ... [阅读全文]
使用递归原生实现拷贝&&最简单的方法实现深拷贝

<script> // 第一种:最简单的方法,一行代码实现 JSON.p... [阅读全文]
【剑指 Offer 45】把数组排成最小的数

输入一个非负整数数组，把数组里所有数字拼接起来排成一个数，打印能拼接出的所有数字中最小的一个。示例 1:输入: ... [阅读全文]

网友评论


验证码：

vue之手把手教你写日历组件

2019年08月10日 | 移动技术网IT编程 | 我要评论

1.日历组件

1.分析功能：日历基本功能，点击事件改变日期，样式的改变

1.结构分析：html

1.分为上下两个部分

2.上面分为左按钮，中间内容展示，右按钮

3.基本结构页面html书写

4.一些事件以及逻辑

1.使得当前的日期为今天的日期

2.设置该月日期起始值（找到一号是在哪里）

3.当月天数字体正常显示

4.当月天数之前的部分变灰，外加正常显示日期

1.当前月天数日期

2.上月剩余天数

3.此月显示的下月天数

5.能知道当前日期，能点击其他日期，并且会有相应的变化

6.前后两个按钮的功能

7.判断点击的是否为当月的最后一天

1.日历组件

1.分析功能：日历基本功能，点击事件改变日期，样式的改变

1.结构分析：html

1.分为上下两个部分

2.上面分为左按钮，中间内容展示，右按钮

3.基本结构页面html书写

4.一些事件以及逻辑

1.使得当前的日期为今天的日期

2.设置该月日期起始值（找到一号是在哪里）

3.当月天数字体正常显示

4.当月天数之前的部分变灰，外加正常显示日期

1.当前月天数日期

2.上月剩余天数

3.此月显示的下月天数

5.能知道当前日期，能点击其他日期，并且会有相应的变化

6.前后两个按钮的功能

7.判断点击的是否为当月的最后一天

您可能感兴趣的文章:

相关文章:

网友评论