vue-element日历calendar组件个性化改造（备忘录圆点、点击事件）

需求如图，总结如下
1.根据后台返回的数据，判断有备忘录的给出标注，memoLevel为紧急程度 1为紧急（红色），2一般（蓝色），3不重要（绿色），显示小圆点，
2.如果同一天出现很多条备忘录，根据第一条紧急程度显示圆点颜色，
3.点击每一天请求数据，显示当天的备忘录，
4.页面初始化显示当月数据
5.点击上个月、当天、下个月请求对应日期的数据

废话不说，上代码

html

       <el-col :lg="10" :xl="10" class="col2"><div class="card"><div class="title"><div class="text">日程安排与计划</div><div @click="viewAdd" class="viewAll"><div class="text">查看全部</div><div class="img"><img src="@/assets/image/icon_sidenav_arrownm.png" /></div></div></div><div class="line"></div><div class="calendarContainer"><el-calendar :first-day-of-week="7" v-model="date"><template slot="dateCell" slot-scope="{ data }"><div slot="reference" @click="updateMemo(data)"><p:class="{'can-selected': dealMyDate(data.day).hasMemo,red: dealMyDate(data.day).memoLevel / 1 == 1,blue: dealMyDate(data.day).memoLevel / 1 == 2,green: dealMyDate(data.day).memoLevel / 1 == 3,}"><span class="num">{{ data.day.split("-").slice(1)[1] }}</span><!-- <span>{{dealMyDate(data.day)}}</span> --></p></div></template></el-calendar></div><div class="memorandumTop"><div class="memorandumTitle"><div class="img"><img src="@/assets/image/icon_homepage_memo.png" /></div><div class="memorandumText">备忘</div></div><div @click="dialogVisible = true" class="create"><div class="plus">+</div><div class="text">新建</div></div></div><div class="memorandumListContainer"><div :key="item.id" class="listItem" v-for="item in memorandumList"><div class="type"><divclass="unimportantPoint"v-if="item.memoLevel == '3'"></div><div class="normalPoint" v-if="item.memoLevel == '2'"></div><div class="importantPoint" v-if="item.memoLevel == '1'"></div></div><div class="text">{{ item.memoContent }}</div></div><div v-if="memorandumList.length == 0">暂未查询到备忘录</div></div><div class="paginationContainer"><el-pagination:current-page="memorandumCurrentPage":page-size="memorandumPageSize":page-sizes="[10, 20, 30, 40]":total="memorandumTotal"@current-change="memorandumCurrentChange"@size-change="memorandumSizeChange"backgroundlayout="total, prev, pager, next, sizes, jumper"></el-pagination></div></div></el-col>

formatDate.js

export function  timestampToTime (time) {if(time){var date = new Date(time) //时间戳为10位需*1000，时间戳为13位的话不需乘1000let Y = date.getFullYear() + '-';let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';let D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';let m = date.getMinutes()  < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();return Y + M + D + h + m + s;}else{return ''}
}
export function  timestampToDay (time) {if(time){var date = new Date(time) //时间戳为10位需*1000，时间戳为13位的话不需乘1000let Y = date.getFullYear() + '年';let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '月' : date.getMonth() + 1 + '月';let D = date.getDate() < 10 ? '0' + date.getDate() + '日' : date.getDate() + '日';const w =date.getDay();const weekObj={1:'星期一',2:'星期二',3:'星期三',4:'星期四',5:'星期五',6:'星期六',0:'星期日',}return Y + M + D +weekObj[w];}else{return ''}
}
export function  timestampToMonth (time) {if(time){var date = new Date(time) //时间戳为10位需*1000，时间戳为13位的话不需乘1000let Y = date.getFullYear() + '年';let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '月' : date.getMonth() + 1 + '月';return Y + M ;}else{return ''}
}

import { timestampToTime } from "@/utils/formatDate.js"
import {getMemoList,addMemo,editMemo,delMemo,
} from "@/api/homepage/memo.js" //请求接口的api
export default {data() {return {date: new Date(),chooseDay: "",saveMothData: [],memorandumList: [],memorandumCurrentPage: 1,memorandumPageSize: 10,memorandumTotal: 0,}},created() {this.$nextTick(() => {// 点击上个月let prevBtn1 = document.querySelector(".el-calendar__button-group .el-button-group>button:nth-child(1)");prevBtn1.addEventListener("click", () => {let str = timestampToTime(this.date);str = str.substring(0, 7);const param = {// pageNum: this.memorandumCurrentPage,pageNum:1,pageSize: this.memorandumPageSize,param: {month: str,emplId: this.emplId,},};this.queryMemoList(param, true);});// 点击今天let prevBtn2 = document.querySelector(".el-calendar__button-group .el-button-group>button:nth-child(2)");prevBtn2.addEventListener("click", () => {console.log(this.saveMothData);let str = timestampToTime(this.date);const param = {today: str.substring(0, 10),// pageNum: this.memorandumCurrentPage,pageNum: 1,pageSize: this.memorandumPageSize,param: {month: str.substring(0, 7),emplId: this.emplId,},};this.queryMemoList(param, true);});// 点击下个月let prevBtn3 = document.querySelector(".el-calendar__button-group .el-button-group>button:nth-child(3)");prevBtn3.addEventListener("click", () => {let str = timestampToTime(this.date);str = str.substring(0, 7);const param = {// pageNum: this.memorandumCurrentPage,pageNum: 1,pageSize: this.memorandumPageSize,param: {month: str,emplId: this.emplId,},};this.queryMemoList(param, true);});});},mounted() {this.queryMemoList(null, true);},methods:{//处理请求回的数据，与日历数据相挂钩dealMyDate(v) {// console.log(v);let len = this.saveMothData.length;let res = {};for (let i = 0; i < len; i++) {if (this.saveMothData[i].memoDate == v) {res.hasMemo = true;res.memoLevel = this.saveMothData[i].memoLevel;res.memoTime = this.saveMothData[i].memoTime;break;}}return res;},//点击日历上每一天更新备忘录列表updateMemo(data) {this.chooseDay = data.day;this.memorandumCurrentPage = 1;const param = {pageNum: this.memorandumCurrentPage,pageSize: this.memorandumPageSize,param: {day: data.day,emplId: this.emplId,},};this.queryMemoList(param);},//查询备忘录列表queryMemoList(data, flag) {// console.log(flag);var param;if (data) { //param = data;param.emplId = this.emplId;} else { //不传data的情况，有可能是初次加载或者不传month也不传dayparam = {param: {emplId: this.emplId,},pageNum: this.memorandumCurrentPage,pageSize: this.memorandumPageSize,};}// console.log(param, 'param')getMemoList(param).then((res) => {// console.log(res);if (res.code == 200) {this.memorandumList = res.data;this.memorandumTotal = res.recordsTotal;if (flag == true) {this.saveMothData = res.data;}//如果点击今天按钮，请求当月数据，把当天数据过滤出来，既不影响日历所有圆点，又保证数据正确if (data &&data.today == timestampToTime(new Date()).substring(0, 10)) {this.memorandumList = res.data.filter((v) => v.memoDate == data.today);}}if (res.data.length == 0) {this.$message.success("暂无数据！");}});},
}
}

css

     .calendarContainer {width: 100%;height: 350px;.el-calendar {width: 100%;height: 350px;/deep/ .el-calendar__header {width: 100%;height: 56px;border-bottom: none;.el-calendar__title {font-size: 20px;color: #333333;}}/deep/ .el-calendar__body {width: 100%;height: 293px;padding: 0;thead {th {font-size: 18px;color: #333333;padding: 10px 0;}}.el-calendar-table__row {height: 40px;.prev {border: none;.el-calendar-day {height: 40px;display: flex;justify-content: center;align-items: center;}}.current {border: none;.el-calendar-day {height: 40px;display: flex;justify-content: center;align-items: center;}}.next {border: none;.el-calendar-day {height: 40px;display: flex;justify-content: center;align-items: center;}}}}}}.memorandumTop {width: 100%;height: 32px;display: flex;justify-content: space-between;align-items: center;.memorandumTitle {display: flex;justify-content: flex-start;align-items: center;.img {width: 14px;height: 16px;display: flex;justify-content: center;align-items: center;img {width: 14px;height: 16px;}}.memorandumText {margin-left: 8px;font-size: 18px;color: #666666;}}.create {width: 82px;height: 32px;background-color: #ffffff;display: flex;justify-content: center;align-items: center;border: 1px solid #666666;box-sizing: border-box;border-radius: 4px;.plus {height: 30px;line-height: 24px;font-size: 24px;color: #333333;}.text {margin-left: 8px;font-size: 14px;color: #333333;}}}.memorandumListContainer {margin-top: 12px;width: 100%;height: 184px;overflow-y: scroll;overflow-x: hidden;padding-right: 1.7%;&::-webkit-scrollbar {width: 6px;}&::-webkit-scrollbar-thumb {background-color: #d8dce6;border-radius: 3px;}&::-webkit-scrollbar-track {background-color: #ffffff;}.listItem {margin-bottom: 16px;width: 100%;display: flex;justify-content: flex-start;align-items: flex-start;.type {width: 8px;height: 16px;display: flex;justify-content: center;align-items: center;.unimportantPoint {width: 8px;height: 8px;background-color: #47cf89;border-radius: 50%;}.normalPoint {width: 8px;height: 8px;background-color: #46a2ff;border-radius: 50%;}.importantPoint {width: 8px;height: 8px;background-color: #ff194c;border-radius: 50%;}}.text {margin-left: 12px;display: flex;justify-content: flex-start;align-items: center;font-size: 14px;color: #666666;}}}.paginationContainer {border-top: 1px solid #d8dce6;width: 100%;height: 91px;display: flex;justify-content: center;align-items: center;/deep/ .el-pagination {width: 100%;height: 32px;display: flex;justify-content: flex-end;align-items: center;.el-pagination__total {font-size: 14px;color: #999999;margin-right: calc(100% - 430px);}.el-pagination__sizes {margin-right: 2px;}.el-pagination__jump {margin-left: 0;}}}.can-selected {width: 100%;height: 100%;text-align: center;.num {position: relative;text-align: center;}.num::after {content: "·";display: block;position: absolute;left: 0;right: 0;bottom: -22px;font-size: 30px;}}.can-selected.red {color: red;}.can-selected.blue {color: #46a2ff;}.can-selected.green {color: #47cf89;}.content-item {display: flex;align-items: center;}

欢迎大佬提出更好的方案

vue-element日历calendar组件个性化改造（备忘录圆点、点击事件）相关推荐

vue关于element日历calendar组件上月、今天、下月、日历块点击事件
vue关于element日历calendar组件上月.今天.下月.日历块点击事件参考 https://blog.csdn.net/qq493820798/article/details/106858 ...
vue学习之关于element日历calendar组件中上月，今天，下月的显示
今天学习写日历的模板,不过element日历组件官方文档提供的资料较少,所以试着写了个简单的,以后再深入学习. 显示效果图: 本月: 上月: 下月: 下方是源码 <template> &l ...
vue关于element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
交流qq群:672373393 前端项目公开在码云:https://gitee.com/xiao_yulong/noob-admin-ui 欢迎大家进群讨论! 辰小白小白最近在写日历模板,项目已经用了 ...
vue element Pagination分页组件二次封装
vue+element 的分页组件封装 1.在components中创建GlobalPagination文件夹,代码如下 <template><div :class="{' ...
vue element 的 el-cascade 组件如何实现多选点击确认提交操作
1. 实现效果做这个也是自己踩了好多坑,比如: 用第三方的 el-cascader-multi 多选组件,不能实现自己想要的效果,element 最新版 2.12.0 就已经有完善,不需要使用那个第 ...
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据（内容）
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据(内容) 能够解决的问题需要在表格中添加一个类似修改或编辑的按钮,按下按钮,弹出的窗口需要本行的渲染数据需要向服务端提交一 ...
在vue中，Echarts雷达图中indicator的点击事件，不能改变data中的值的解决方法
在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法参考文章: (1)在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的 ...
vue使用高德地图为信息窗体再添加点击事件
即使是用的vue,也不能使用@click为窗体添加点击事件,需要使用onclick,并且在定义了函数后,使用该函数还是会报函数未定义的错误,需要在window下添加该函数,点击时可以在原型链中找到该函 ...
vue中进入页面，自动触发一次点击事件
vue中进入页面,自动触发一次点击事件 html script 一进去页面,我肯定是要进去就能看到数据,而不是需要点击选项1才得到数据,解决办法就是直接在created()中调用 html <d ...

vue-element日历calendar组件个性化改造（备忘录圆点、点击事件）

vue-element日历calendar组件个性化改造（备忘录圆点、点击事件）相关推荐

最新文章

热门文章