vue日历组件的封装方法
更新时间：2022年03月08日 11:45:56 作者：面壁思过程
这篇文章主要为大家详细介绍了vue封装一个日历组件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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分页查询怎么实现，使用vue实现分页的逻辑并不复杂，接收后端传输过来的数据，然后根据数据的总数和每一页的数据量就可以计算出一共可以分成几页2023-04-04
今天小编就为大家分享一篇vue 修改 data 数据问题并实时显示的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
Vue3 Element-plus el-menu无限级菜单组件封装过程
对于element中提供给我们的el-menu组件最多可以实现三层嵌套，如果多一层数据只能自己通过变量去加一层，如果加了两层、三层这种往往是行不通的，所以只能进行封装，这篇文章主要介绍了Vue3 Element-plus el-menu无限级菜单组件封装,需要的朋友可以参考下2023-04-04
如何封装axios form-data针对统一的formData入参方式
这篇文章主要介绍了如何封装axios form-data针对统一的formData入参方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
vue3项目vite.config.js配置代理、端口、打包名以及图片压缩
这篇文章主要给大家介绍了关于vue3项目vite.config.js配置代理、端口、打包名以及图片压缩的相关资料,因为3.0版本中vue已经内置了很多关于webpack的配置,一般情况下开箱即用,需要修改则可以在vue.config.js文件中完成,需要的朋友可以参考下2023-12-12
今天小编就为大家分享一篇关于vue-router重定向和路由别名的使用讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
Vant 如何修改van-collapse-item右侧图标
这篇文章主要介绍了Vant 如何修改van-collapse-item右侧图标，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
所谓虚拟DOM就是为了解决浏览器性能问题而被设计出来的。如前，若一次操作中有 10 次更新 这篇文章主要给大家介绍了关于Vue源码分析之虚拟DOM的相关资料,需要的朋友可以参考下2021-05-05
这篇文章主要给大家介绍了关于vue打开新窗口并实现传参的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
vue2.0 watch里面的 deep和immediate用法说明
这篇文章主要介绍了vue2.0 watch里面的 deep和immediate用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
最新评论