vue封装一个日历组件

图示

封装的组件的代码如下

<template><div class="calendar"><!-- 选择日历的弹出层 --><div class="model_mask" v-show="showtimemask" @click="showmask1()"></div><div class="bouncedBox" v-show="showtimemask"><div class="mobile-top"><div class="sel-time"><p>开始时间</p><p class="start-date">{{starttime.substring(0,4)+'-'+starttime.substring(4,6)+'-'+starttime.substring(6,8)}}</p></div><div class="unsel-time"><p>结束时间</p><p class="end-date">{{endtime==''?'请选择结束日期':endtime.substring(0,4)+'-'+endtime.substring(4,6)+'-'+endtime.substring(6,8)}}</p></div></div><div class="title"><div class="btn" @click.stop="last()" :class="(month<=nowmonth)&&(Year<=nowYear)?'noclick':'' ">上一月</div><div class="text">{{Year}}年{{month}}月</div><div class="btn" @click.stop="next()">下一月</div></div><div class="head"><div class="days" v-for="(item,index) in ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']" :key="index">{{item}}</div></div><div class="wrap"><div class="span" v-for="(item,index) in calendarList" :key="index" @click.stop="click(item.count)" :class="item==''?'kong':item.count<nowtime?'noclick':(item.count>=starttime&&item.count<=endtime)||item.count==starttime?'active':''">{{item.value}}</div></div><div class="bottombtn"><button class="cancle-btn" @click.stop='cancle()'>取消</button><button class="sure-btn" @click.stop='firm()'>确定</button></div></div></div>
</template><script>export default {name: "Calendar",data() {return {showtimemask:false,Puton_time: '', //投放日期  默认今日 展示Puton_Start:'',  //为了保存投放开始结束的日期  用来点击取消按钮时初始化选中的值Puton_End:'',nowtime: '', //当前日期的时间-----20190203格式  用于比较clickitem: '', //保存每次点击的时间-----20190203格式  用于比较clickcount: 0, //点击次数-------判断开始时间还是结束时间starttime: '', //开始时间  数字   默认当天日期endtime: '', //结束时间  数字   默认当天日期Year: new Date().getFullYear(), //日历上的年份   ----动态改变的month: new Date().getMonth() + 1, //日历上的月份 ----  动态改变的Day: new Date().getDate(), //日历上的天份         ----- 动态改变的nowYear: new Date().getFullYear(),nowmonth: new Date().getMonth() + 1,nowDay: new Date().getDate(),calendarList: [],};},created() {//关于日历的操作开始this.Draw(this.nowYear, this.nowmonth);let time_month = this.nowmonth; //现在的月份let time_day = this.nowDay; //现在的天数if (this.nowmonth < 10) {time_month = 0 + '' + this.nowmonth;}if (this.nowDay < 10) {time_day = 0 + '' + this.nowDay;}this.nowtime = this.nowYear + '' + time_month + '' + time_day;this.starttime = this.nowtime;this.endtime = this.nowtime;this.Puton_time = this.starttime.substring(0, 4) + '-' + this.starttime.substring(4, 6) + '-' + this.starttime.substring(6, 8) + '至今';this.Puton_Start = this.nowtime,this.Puton_End = this.nowtime,this.$emit('str',this.Puton_time)//关于日历的操作结束},mounted() {},methods: {showmask1() {if (this.showtimemask == true) {// this.showtimemask=false;   //隐藏弹框this.cancle();} else {this.showtimemask = true;  //显示弹框}},Draw: function (Year, Month) {//日期列表var calendar = [];//用当月第一天在一周中的日期值作为当月离第一天的天数(获取当月第一天是周几)for (var i = 1, firstDay = new Date(Year, Month - 1, 1).getDay(); i <= firstDay; i++) {calendar.push("");}//用当月最后一天在一个月中的日期值作为当月的天数for (var i = 1, monthDay = new Date(Year, Month, 0).getDate(); i <= monthDay; i++) {let time_month = Month;let time_day = i;if (Month < 10) {time_month = 0 + '' + Month;}if (i < 10) {time_day = 0 + '' + i;}calendar.push({value: i,count: Year + '' + time_month + '' + time_day})}this.calendarList = calendar;console.log(calendar)},last() {this.month--;if (this.month == 0) {this.month = 12;this.Year--;}this.Draw(this.Year, this.month);},next() {this.month++;if (this.month == 13) {this.month = 1;this.Year++;}this.Draw(this.Year, this.month);},click(item) {this.clickcount++;this.clickitem = item;//开始日期if (this.clickcount % 2 == 1) {this.starttime = this.clickitem;this.endtime = ''} else {this.endtime = this.clickitem;if (this.starttime > this.endtime) {this.endtime = this.starttime;this.starttime = this.clickitem;}}},firm() {this.showtimemask = false;//当选择的开始时间与结束时间相同时   显示为2019-07-19当天if (this.starttime == this.endtime) {this.Puton_Start = this.starttime,this.Puton_End = this.endtime,this.Puton_time = this.starttime.substring(0, 4) + '-' + this.starttime.substring(4, 6) + '-' + this.starttime.substring(6, 8) + '当天';this.$emit('str',this.Puton_time);//否则显示xxx 至   xxx} else {this.Puton_Start = this.starttime,this.Puton_End = this.endtime,this.Puton_time =this.starttime.substring(0, 4) + '-' + this.starttime.substring(4, 6) + '-' + this.starttime.substring(6,8) +'至' + this.endtime.substring(0, 4) + '-' + this.endtime.substring(4, 6) + '-' + this.endtime.substring(6, 8);this.$emit('str',this.Puton_time)}},// 取消按钮cancle() {this.showtimemask = false; //当按取消按钮时   弹框中选中的区域等于上一次选中的区域this.starttime = this.Puton_Start;this.endtime = this.Puton_End;// this.Puton_time = this.starttime.substring(0, 4) + '-' + this.starttime.substring(4, 6) + '-' + this.starttime//   .substring(6, 8) + '至今';//   this.$emit('str',this.Puton_time)}}};</script><style scoped lang="scss">@import "../common/common.css";// 日历的样式.model_mask {position: fixed;top: 0;bottom: 0;left: 0;right: 0;background: rgba($color: #000000, $alpha: 0.5);}.bouncedBox {position: fixed;background: #fff;bottom: 0;left: 0;right: 0;//开始结束日期的显示.mobile-top {display: flex;flex-wrap: nowrap;background: #fff;padding: 0.1rem 0;.sel-time {text-align: center;width: 50%;// border-bottom: solid 2px #2a81e8;.start-date {color: #b1b1b1;margin-top: 0.05rem;}}.unsel-time {text-align: center;width: 50%;.end-date {color: #b1b1b1;margin-top: 0.05rem;}}}// 左右选择月份  显示当前年月.title {width: 100%;height: 40px;background-color: #60a7e8;display: flex;flex-wrap: nowrap;text-align: center;color: #fff;font-weight: bold;line-height: 40px;.btn {width: 1.2rem;&.noclick {pointer-events: none;background: #ccc;}}.text {flex: 1;}}//表头  周1到周天的显示.head {display: flex;flex-wrap: nowrap;text-align: center;height: 40px;line-height: 40px;.days {flex: 1;}}//日历表区域.wrap {width: 7.5rem;height: auto;overflow: hidden;padding-bottom: 1rem;.span {width: 1.07142rem;height: 0.6rem;background: #fff;color: #337ab7;float: left;text-align: center;line-height: 0.6rem;&.active {background: #037ef5;color: #fff;}&.noclick {pointer-events: none;background: #ccc;}&.kong {background: #fff;pointer-events: none;}}}//底部按钮区域.bottombtn {height: 40px;width: 100%;display: flex;flex-wrap: nowrap;button {flex: 1;}.sure-btn {background: #037ef5;color: #fff;}}}</style>

使用方法

main,js引入全局注册组件

import Calendar from './components/fz_zujian/Calendar.vue'    //日历组件
Vue.component('Calendar',Calendar)

页面使用

<div class="" @click="showmodel()">{{str}}</div><Calendar ref="chi1" v-on:str="getChild"></Calendar>data() {return {str: '',}}showmodel(){this.$refs.chi1.showmask1()},getChild(val) {this.str = val},

vue封装一个日历组件相关推荐

从 0 到 1 用 Vue 封装一个日历组件
写在前面双手奉上代码链接: 传送门 - ajun568(https://github.com/ajun568/vue-calendar),点击文末阅读原文直达双脚奉上最终效果图: 需求分析需求分 ...
基于Vue开发一个日历组件
最近在做一个类似课程表的需求,需要自制一个日历来支持功能及展现,就顺便研究一下应该怎么开发日历组件. 更新 2.23修复了2026年2月份会渲染多一行的bug,谢谢@深蓝一人童鞋提出的bug,解决方案 ...
用vue 编写一个日历组件（非常详细-让日历简单起来）
相信有不少小伙伴和我一样一提到日历就脑壳疼,然后去网上搜索好用的日历组件,如element-ui什么的,但是日历毕竟是别人开发出来的, 和自己家ui设计出来的功能样式毕竟不能100%相似,所以这个时候 ...
学习笔记Vue（十四）—— 用vue写一个日历组件
先看一下实现的效果: 实现日历的逻辑: 先写出日历的大致结构,分两个部分,头部和主体部分,日历先显示6排7列,总共42个数字,按从1到42来显示: <div class="every- ...
vue封装一个弹幕组件
说在前面
Vue手写一个日历组件
工作中遇到一个需求是根据日历查看某一天/某一周/某一月的睡眠报告,但是找了好多日历组件都不是很符合需求,只好自己手写一个日历组件,顺便记录一下. 先来看看设计图是什么样式, 跟其他日历有点不一样,这个 ...
Vue3VideoPlay+vue3+ts封装一个视频播放组件
vue3+ts封装一个视频播放组件基于Vue3VideoPlay 做了常用的配置,复制即用! 官方文档https://codelife.cc/vue3-video-play/ 安装 npm安装: n ...
vue 开发一个按钮组件
最近面试,被问到一个题目,vue做一个按钮组件: 当时只是说了一下思路,回来就附上代码. 解决思路: 通过父子组件通讯($refs 和 props) props接受参数, $refs调用子组件的方法 ...
pc端签名 vue 生成图片_使用vue实现一个电子签名组件
使用vue实现一个电子签名组件在生活中我们使用到电子签名最多的地方可能就是银行了,每次都会让你留下大名.今天我们就要用vue实现一个电子签名的面板想要绘制图形,第一步想到的就是使用canvas标签 ...

vue封装一个日历组件

vue封装一个日历组件相关推荐

最新文章

热门文章