vue学习之关于element日历calendar组件中上月，今天，下月的显示

今天学习写日历的模板，不过element日历组件官方文档提供的资料较少，所以试着写了个简单的，以后再深入学习。

显示效果图：

本月：

上月：
下月：
下方是源码

<template>
<div>
<el-calendar v-model="value" id="calendar">
<!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
<template
slot="dateCell"
slot-scope="{date, data}">
<!--自定义内容-->
<div>
<div class="calendar-day">{{ data.day.split('-').slice(2).join('-') }}</div>
<div v-for="item in calendarData">
<div v-if="(item.months).indexOf(data.day.split('-').slice(1)[0])!=-1">
<div v-if="(item.days).indexOf(data.day.split('-').slice(2).join('-'))!=-1">
<el-tooltip class="item" effect="dark" :content="item.things" placement="right">
<div class="is-selected">{{item.things}}</div>
</el-tooltip>
</div>
<div v-else></div>
</div>
<div v-else></div>
</div>
</div>
</template>
</el-calendar>
</div>
</template>
<script>
import $ from '@/assets/libs/Util'
export default {name: "jianbao",
data() {return {calendarData: [//日历数据的格式如下
// { months: ['09', '12'],days: ['15'],things: '今日任务：111 明日任务:222' },
// { months: ['09', '12'],days: ['15'],things: '已完成任务:110 未完成任务:1' },
// { months: ['10', '11'], days: ['02'],things: '去公园野炊' },
// { months: ['11'], days: ['02'],things: '看星星' },
//{ months: ['11'], days: ['02'],things: '看月亮' }
],
value: new Date()
}
},
methods:{getApp(){//通过接口获取某月某日中的未完成任务，已完成任务，今日任务
var aa="";
if(this.value!=null && this.value!=""){var year=this.value.getFullYear();
var day=this.value.getDate();
var month=this.value.getMonth()+1;
if(month<10){month="0"+month;
}
if(day<10){day="0"+day;
}
aa=year+"-"+month+"-"+day;
}
let data={"account":sessionStorage.getItem("account"),
"time":aa,
}
$.ajax.post(sessionStorage.getItem("setpath")+"api/briefingRili",data).then(res=>{if(res.data.code==0){this.calendarData=res.data.data;
}
})
}
},
created() {this.getApp();
this.$nextTick(() => {// 点击前一个月
let prevBtn = document.querySelector(
".el-calendar__button-group .el-button-group>button:nth-child(1)"
);
prevBtn.addEventListener("click", e => {this.getApp();
/**
* this.$notify({
title: "上一月",
message: "上个月头天：" + this.value,
type: "success",
position: "top-left"
});
* */
});//点击下一个月
let nextBtn = document.querySelector(
".el-calendar__button-group .el-button-group>button:nth-child(3)"
);
nextBtn.addEventListener("click", () => {this.getApp();
/**
* this.$notify({
title: "下一月",
message: "下个月头天：" + this.value,
type: "warning",
position: "top-left"
});
* */
});//点击今天
let todayBtn = document.querySelector(
".el-calendar__button-group .el-button-group>button:nth-child(2)"
);
todayBtn.addEventListener("click", () => {this.getApp();
/**
* this.$notify.info({
title: "今天",
message: "今天：" + this.value,
position: "top-left"
});
*/
});
});
}}
</script><style>
.calendar-day{text-align: center;
color: #202535;
line-height: 30px;
font-size: 12px;
}
.is-selected{color:dodgerblue;
font-size: 10px;
margin-top: 5px;
}
#calendar .el-button-group>.el-button:not(:first-child):not(:last-child):after{content: '当月';
}
</style>

具体的几个点击事件都有备注，这里不细说了。

vue学习之关于element日历calendar组件中上月，今天，下月的显示相关推荐

vue关于element日历calendar组件上月、今天、下月、日历块点击事件
vue关于element日历calendar组件上月.今天.下月.日历块点击事件参考 https://blog.csdn.net/qq493820798/article/details/106858 ...
vue关于element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
交流qq群:672373393 前端项目公开在码云:https://gitee.com/xiao_yulong/noob-admin-ui 欢迎大家进群讨论! 辰小白小白最近在写日历模板,项目已经用了 ...
Vue学习笔记：Element时间控件设置某一个日期禁止选择
Vue学习笔记:Element时间控件添加一段时间禁止选择需求:时间控件,当天之前禁止选择,某一个日期的之前时间禁止选择文档: 代码实现:在时间控件上添加 :picker-options=&quo ...
Vue学习笔记（2）（组件化开发）
Vue2.x学习笔记.原视频教程:最全最新Vue.Vuejs教程,从入门到精通_哔哩哔哩 (゜-゜)つロ干杯~-bilibili 组件化 1. 什么是组件化? 组件化是Vue.js中的重要思想它提 ...
vue学习笔记-关于element ui 安装失败的问题解决
今天学习vue时,对element ui进行安装,运行npm install element-ui -S 命令,出现报错: npm ERR! code ERESOLVE npm ERR! ERESOL ...
Vue学习（十六）：组件间通信
1. props 1.1 使用功能:让组件接收外部传过来的数据传递数据:<Demo name="xxx"/> 接收数据: 第一种方式(只接收):props:['na ...
Vue学习笔记（十九）——组件props信息的修改
本文主要介绍一下组件对props(即传入参数)的处理. props是父组件给子组件传递的参数,而子组件需要修改props的场景非常多,但props并不像组件自己的属性那样可以随意修改(因为props会 ...
vue修改config后怎么生效_vue组件中修改样式怎么不生效？
vue组件中修改样式怎么不生效?下面本篇文章给大家介绍一下vue组件修改样式不起作用的解决方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. vue组件修改样式不起作用需要在全局 ...
饿了么 (Element)的日历(Calendar)组件自定义
笔记由于本人用vue+elementui 写了一个关于日历的项目需求是每个日期对应不同的价格并且点击两次之后取其区间的值并计算出总价后来翻了很多资料才找到一些思路 (由于在饿了么ui的日历组件库 ...

vue学习之关于element日历calendar组件中上月，今天，下月的显示

vue学习之关于element日历calendar组件中上月，今天，下月的显示相关推荐

最新文章

热门文章