vue + elementUI简单的实现日历功能,供大家参考,具体内容如下
& lt; div类=癱alender2”比;
& lt; div类=癲ate-headers”比;
& lt; div类=癲ate-header”比;
& lt; div> & lt; el-button类型=爸鳌盄click=癶andlePrev祝辞& lt;我类=癳l-icon-arrow-left祝辞& lt;/i>上一月& lt;/el-button> & lt;/div>
& lt; div>{{一}}年{{月}}月{{一}}日& lt;/div>
& lt; div> & lt; el-button类型=爸鳌盄click=癶andleNext”比;下一月& lt;我类=癳l-icon-arrow-right祝辞& lt;/i> & lt;/el-button> & lt;/div>
& lt; div> & lt; el-button类型==癳l-icon-refresh-left @click”=爸鳌蓖急辍八⑿隆弊４? lt;/el-button> & lt;/div>
& lt;/div>
& lt;/div>
& lt; div类=癲ate-content”比;
& lt; div类=皐eek-header”比;
& lt; div
v代表="项(“日”、“一”、“二”、“三”、“四”、“五”,“六”)”
:关键=项目
在{{项}}
& lt;/div>
& lt;/div>
& lt; div类=肮ぷ魅铡北?
& lt; div
类="日常"
42 v="项目”
:关键="项目"
@click=" handleClickDay(项目- beginDay)”
比;
& lt; div v=毕钅俊猙eginDay祝辞0,,项- beginDay & lt;=curDays”:类=" " ${一}-{月}-{项目- beginDay}”===" ${一}-{月}-{天}’美元& # 63;“现在”:“
在{{项目——beginDay}} & lt;/div>
& lt; div类=耙惶臁眝-else-if=跋钅? beginDay & lt;=0”的在{{item - beginDay + prevDays}} & lt;/div>
& lt; div类=耙惶臁眝-else> {{item - beginDay -curDays}} & lt;/div>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/div>
# # javascript
& lt; script>
出口默认{
名称:“HelloWorld”,
数据(){
返回{
:空,
月:空,
天:空,
currentDay:空,
currentYearMonthTimes: null,//当前年的月的天数
monthOneDay: null,//一个月中的某一天
curDate:空,
prevDays: null,//上一月天数
}
}，
计算:{
curDays () {
返回新日期(这一点。年,这个。月,0).getDate ();
}，//设置该月日期起始值(找到一号是在哪里)
beginDay () {
返回新日期(这一点。年,这个。月- 1,1).getDay ();
}
}，
创建(){
this.getInitDate ();
这一点。currentYearMonthTimes=this.mGetDate(这一点。年,this.month);//本月天数
这一点。prevDays=this.mGetDate(这一点。年,这个。月- 1);
这一点。curDate=" $ {this.year} - {this.month} - {this.day}’美元
console.log (this.curDate)
}，
方法:{
refresh(){//强制刷新页面
的位置。重载()
}，
handleClickDay(天){//点击这一天,绑定点击事件
控制台。日志(“形参传进来的”,)
控制台。日志(的数据里面的this.day’, this.day)
控制台。日志(的数据里面的currentYearMonthTimes’, this.currentYearMonthTimes)
这一点。一天一天=如果这一点。天比;this.currentYearMonthTimes) {
message.warning美元。(“不能选择超出本月的日期”);
}
console.log(天)
}，
computedDay () {
const整天=new日期(这一点。年,这个。月,0).getDate ();
如果这一点。天比;整天){
这一点。一天=整天;
}
}，//设置页头显示的年月日
getInitDate () {
const日期=new日期();
这一点。年=date.getFullYear ();
这一点。月=date.getUTCMonth () + 1;
这一点。一天=date.getDate ();
}，//如果要获取当前月份天数:
mGetDate () {
var=new日期();
var年=date.getFullYear ();
var月=date.getMonth () + 1;
var d=新日期(年、月,0);
返回d.getDate ();
}，
handlePrev () {
如果这一点。月==1){
这一点。月=12
this.year——
其他}{
this.month——
}
this.computedDay ()
}，
handleNext () {
如果这一点。月==12){
这一点。月=1
this.year + +
其他}{
this.month + +
}
this.computedDay ()
}
}
}
& lt;/script>
& lt; scoped>风格;
* {
保证金:0 px;
边界:0 px;
list-style:没有;
}
.calender2 {
border - radius: 4 px;
位置:绝对的;
上图:50%;
左:50%;
变换:翻译(-50%,-50%);
身高:396 px;
宽度:420 px;
边界:1 px固体# ccc;
不必:0 2 px 4 px rgba(0, 0, 0,点),0 0 6 px rgba(0, 0, 0, .04点)
}
.date-header {
高度:60 px;
宽度:422 px;
显示:flex;
对齐项目:中心;
justify-content:空间;
}
.date-headers {
高度:60 px;
宽度:422 px;
显示:flex;
}
.pre-month {
位置:绝对的;
显示:inline-block;
高度:0 px;
宽度:0 px;
边界:15 px固体;
边框颜色:透明的rgb(35、137、206)透明透明;
}
.next-month {
位置:绝对的;
显示:inline-block;
高度:0 px;
宽度:0 px;
边界:15 px固体;
边框颜色:透明透明透明rgb (35、137、206);
}
.show-date {
margin-left: 40像素;
margin-top: 0 px;
显示:inline-block;
行高:30 px;
text-align:中心;
宽度:310 px;
颜色:rgb (35、137、206);
}
.week-header {
颜色:# 000000;
字体大小:14 px;
text-align:中心;
行高:30 px;
}
.week-header div {
保证金:0;
填充:0;
显示:inline-block;
高度:20 px;
宽度:60 px;
}
每天都{
显示:inline-block;
高度:50 px;
宽度:60 px;
text-align:中心;
行高:50 px;
}
.other-day {
颜色:# ccc;
}
.nowDay {
背景:rgb (121, 206);
边界:1 px固体# 87 c66d;
}
.active-day {/*填充:2 px *//* border-sizing:内容框;*/边界:2 px固体rgb (35、137、206);
}
& lt;/style>
