VUE 自定义日历+切换上下月+点击事件

背景：朋友想让我帮他写一个前端的日历demo，昨天晚上抽空搞了一下，产出了一个Demo。由于是简单demo，所以对样式上没有过多的调整。

思路：

获取每个月的第一天是周几，按照周几插入数据。上个月的在1号前面置空，下个月在月最后一天后面从1开始插入
抽调函数，渲染传参，下个月和上个月切换功能也只要切换参数就可以。
切换上个月或者下个月，只要把对应的年份、月份、日子传到下方渲染的公用方法里即可。

注意点：

这个其实本身是一个很简单的功能，在开发的时候只要细心点，关注一下month，因为在loadCalender方法中，将每个月的日子放入数组里面，数组是从0开始的，月份则是从1 。然后在传数据的时候要求month是从1开始的，所以只要细心关注一下这里，就没有什么问题了。

效果图：

代码：

DOM结构<div class="calendar"><!--上下月箭头切换+日历头--><div class="calendar__header"><span @click="handlePreMonth"><</span><span>{{year}}年{{month}}月{{day}}日</span><span @click="handleNextMonth">></span></div><!--整个日历区域--><div class="calendar__main"><!--周一-周日展示--><div class="main__block-head"><span class="head-span" v-for="(item, index) in blockHead" :key="index">{{item}}</span></div><!--月份日期展示--><div class="main__block"><span class="head-span" v-for="(item, index) in totalCalenderList" :key="index" @click="handleDayClick(item)"><span>{{item.content}}</span><span class="span-status" v-html="spanStatus(item)"></span></span></div></div></div>```data数据:```php
data() {return {year: new Date().getFullYear(),month: new Date().getMonth()+1,day: new Date().getDate(),blockHead: ['日','一','二','三','四','五','六'],totalCalenderList: [],selectedYear: new Date().getFullYear(),selectedMonth: new Date().getMonth(),selectedDate: new Date().getDate(),statusTrue : [// 存放成功数据{month: 3,day: 8},{month: 3,day: 1}],statusFalse: [// 存放失败数据{month: 3,day: 7},{month: 3,day: 2}]};},created() {this.loadCalender(this.year, this.month, this.day);},methods: {loadCalender(year, month, day) {var that = this;// 定义每个月的天数，如果是闰年第二月改为29天// 每个月对应的天数let daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {// 闰年+1天daysInMonth[1] = 29;}// 获得第一天是星期几let targetDay = new Date(year+'-'+month+'-01').getDay();// 将要在calendar__main整个日期中渲染的列表let total_calender_list = [];let perNum = targetDay;// 填充前方空位if (targetDay > 0){for (let i=0; i < perNum; i++){let obj = {type: 'pre',content: "",month: month-1}total_calender_list.push(obj)}}// 填充日期正文数字for (let i=0; i<daysInMonth[month-1]; i++){let obj = {type: 'normal',content: i+1,month: month,};total_calender_list.push(obj)}let nextNum = 0;if(total_calender_list.length > 35) {// 1行7位，超过5行了nextNum = 42 - total_calender_list.length;} else {nextNum = 35 - total_calender_list.length;}for (let i = 0; i<nextNum; i++) {let obj = {type: 'next',content: i+1,month: month+1}total_calender_list.push(obj)}this.totalCalenderList = total_calender_list;console.log("列表", this.totalCalenderList, month)},handlePreMonth() {// 点击切换上个月的日历   if (this.selectedMonth === 0) {this.selectedYear = this.selectedYear - 1this.selectedMonth = 11this.selectedDate = 1} else {this.selectedMonth = this.selectedMonth - 1this.selectedDate = 1}this.loadCalender(this.selectedYear, this.selectedMonth+1, this.selectedDate)console.log("selectedMonth",this.selectedMonth+1)},handleNextMonth() {// 点击切换下个月的日历if (this.selectedMonth === 11) {this.selectedYear = this.selectedYear + 1this.selectedMonth = 0;this.month = 0;this.selectedDate = 1} else {this.selectedMonth = this.selectedMonth + 1;this.month = this.selectedMonth + 1;this.selectedDate = 1}this.loadCalender(this.selectedYear, this.selectedMonth+1, this.selectedDate)console.log("selectedMonth",this.selectedMonth+1)},spanStatus(item) {// 将状态的数据进行对比，并返回出内容let text = '';for(let i=0; i< this.statusTrue.length ; i++) {if(this.statusTrue[i].month === item.month && this.statusTrue[i].day === item.content){console.log("new", this.statusTrue[i].month,this.statusTrue[i].day, "false", item.month, item.content)text = '成功状态';}}for(let i=0; i< this.statusFalse.length ; i++) {if(this.statusFalse[i].month === item.month && this.statusFalse[i].day === item.content){text = '失败状态';}}return text;},}

css 「只是做了个demo，所以没有写太多样式」

.the-landing {.calendar {width: 700px;margin: 0 auto;box-shadow: 0px 7px 6px 0px rgba(194, 116, 3, 0.14),inset 0px 1px 0px 0px rgba(255, 190, 70, 0.14);.calendar__header {// 日历头text-align: center;line-height: 70px;font-size: 28px;display: flex;justify-content: space-around;}.calendar__main {.main__block-head {width: 700px;display: flex;justify-content: space-around;.head-span {width: 96px;height: 70px;text-align: center;line-height: 70px;}}.main__block {width: 700px;display: flex;justify-content: space-around;flex-wrap: wrap;.head-span {display: flex;flex-direction: column;justify-content: center;>span {width: 96px;height: 70px;line-height: 70px;display: inline-block;text-align: center;}.span-status {font-size: 20px;}}}}}
}

好的，这个简单的demo就放完了，因为写在自己的项目demo中了，这几天会整理产出到积累里面，然后上传到git。等上传完毕后，会来贴git地址。

VUE 自定义日历+切换上下月+点击事件相关推荐

android vue.js点击反应慢,解决vue 界面在苹果手机上滑动点击事件等卡顿问题
用vue编写项目接近尾声,需要集成到移动端中,在webstorm上界面,运行效果都很完美,但是在苹果手机上各种问题都出现了,原生项目一向滑动流畅,事件响应迅速,可是苹果手机打开这个项目有两个问题, ( ...
vue移动端点击事件延迟_解决Vue 界面在苹果手机上滑动点击事件等卡顿问题_莺语_前端开发者...
用 (1).滑动页面卡顿, (2).点击事件响应缓慢,百度才发现在苹果手机上有300ms的延迟. 一.滑动页面卡顿 //页面布局页面内容在对应的组件的最外层div上加上这样的样式: .conten ...
vue 界面在苹果手机上滑动点击事件等卡顿解决方案
用vue编写项目接近尾声,需要集成到移动端中,在webstorm上界面,运行效果都很完美,但是在苹果手机上各种问题都出现了,原生项目一向滑动流畅,事件响应迅速,可是苹果手机打开这个项目有两个问题,(1 ...
vue自定义指令directives实现自动点击事件及自动点击第一个按钮
业务场景:点击弹窗默认加载第一个按钮的数据.vue自定义指令directives实现这个需求目录自动点击所有的按钮. 自动点击第一个按钮, 自动点击所有的按钮. <ul class=&quo ...
Vue自定义组件npm上传私服，且从私服下载使用
Vue自定义组件npm上传私服,yarn私服下载使用安装镜像源管理工具nrm 发布自定义组件到公司私服若未下载nrm源管理工具直接使用npm设置私服地址也可以以下步骤都是基于npm命令从私服下 ...
vue自定义组件-文件上传后端接口
学习目标: vue自定义组件-文件上传后端接口学习内容: 准备工作: 后端环境:JAVA-Springboot项目数据库表(这里使用psql数据库):sys_file_record保存上传文件的信息 ...
android 微博字体高亮,安卓开发札记——高仿新浪微博文字处理（实现关键字高亮，自定义表情替换并加入点击事件实现）...
安卓开发笔记--高仿新浪微博文字处理(实现关键字高亮,自定义表情替换并加入点击事件实现) 先让大家看下效果图,这个是我自己在闲暇时间仿写的新浪微博客户端: 今天来讲讲如何实现上图的效果,这里需要用到S ...
[安卓开发]弹幕滚幕效果自定义View之BarrageView|支持点击事件|隐藏不滞留|颜色随机|大小速度范围随机
安卓弹幕滚幕效果自定义View之BarrageView|支持点击事件|隐藏不滞留|颜色随机|大小速度范围随机 1.简介项目地址: https://github.com/tpnet/BarrageVi ...
echarts 地图去除点击事件_echarts 取消图例上的点击事件和图表上鼠标滑过点击事件...
备注:标黄的代码是起作用的代码,其他的不需要借鉴!!! //取消鼠标滑过的提示框 tooltip : { trigger: 'item', show:false, formatter: " ...

VUE 自定义日历+切换上下月+点击事件

VUE 自定义日历+切换上下月+点击事件相关推荐

最新文章

热门文章