...日历组件使用心得(可能用到的常用方法和如何添加监听)
发布网友
发布时间：2024-10-10 09:27
共1个回答
热心网友
时间：2024-11-13 17:34
最近接触到一个需求，做一个值班排班表，拿到低保真之后一直在考虑是如何实现这个排班表，考虑过自己写，也考虑过@fullcalendar/vue插件，经过一些评估之后最终选择了项目本身使用的element-ui组件库中Calendar日历组件，但是在使用过程中发现此组件api少的可怜，连基本的一些点击事件都没透传出来，这样就不太好去实现根据月份查询排班信息，但是作为前端老司机总归是能解决的。
解决方案想过有成功的，也有失败的，我都贴出来，可以看看。
1、方案一：computed子组件的curMonthDatePrefix，然后再用watch监听curMonthDatePrefix，结论：失败，对curMonthDatePrefix的watch没任何反应。
computed:{curMonthDatePrefix(){letmyCalendar=this.$refs.myCalendar;returnmyCalendar?myCalendar.curMonthDatePrefix:"";},},watch:{curMonthDatePrefix:{immediate:true,handler:function(newval,oldval){console.log("value",this.value);console.log("testnewval",newval);console.log("testoldval",oldval);},},},2、方案二：像watch对象中某个属性一样，结论：失败，对curMonthDatePrefix的watch没任何反应。
watch:{"$refs.myCalendar.curMonthDatePrefix":{immediate:true,handler:function(newval,oldval){console.log("value",this.value);console.log("testnewval",newval);console.log("testoldval",oldval);},},},3、方案三：使用vm.$watchAPI，结论：成功。
引用Calendar的组件：
mounted(){this.$watch(function(){//这就像监听一个未被定义的计算属性returnthis.$refs.myCalendar.curMonthDatePrefix;},function(newVal){//可在此事件中添加请求信息之类的方法console.log("curMonthDatePrefix",newVal);},{immediate:true});},4、方案四：使用extends继承Calendar组件，其合并原则和Mixins类似。继承组件myCalendar.vue中添加watch监听curMonthDatePrefix，在监听事件中添加emit，结论：成功。这也是我最终采用的方式，这种方式还可以改写template，以便后期更好地扩展，同时在下面的代码中加了一下可能会用到的方法。
myCalendar.vue：
<script>import{Calendar}from"element-ui";exportdefault{name:"Calendar",extends:Calendar,watch:{curMonthDatePrefix:{immediate:true,handler:function(){this.$emit("curMonthDatePrefixChange",this.curMonthDatePrefix);},},},};</script>引用myCalendar的组件：
<template><div><my-calendarref="myCalendar"v-model="value"@curMonthDatePrefixChange="curMonthDatePrefixChangeHandler"></my-calendar></div></template><script>importmyCalendarfrom"./myCalendar";importfechafrom"element-ui/src/utils/date";//element-ui中处理时间的工具类exportdefault{name:"Duty",components:{myCalendar,},data(){return{value:newDate(),test:"",};},methods:{curMonthDatePrefixChangeHandler(curMonthDatePrefix){console.log(curMonthDatePrefix);//可在此事件中添加请求信息之类的方法console.log("curMonthDatePrefix",curMonthDatePrefix);console.log("getMondayDay",this.getMondayDay(curMonthDatePrefix));console.log("getSundayDay",this.getSundayDay(curMonthDatePrefix));console.log("getLastSundayDay",this.getLastSundayDay(curMonthDatePrefix));console.log("getLastDayOfMonth",this.getLastDayOfMonth(curMonthDatePrefix));console.log("getFirstDayOfMonth",this.getFirstDayOfMonth(curMonthDatePrefix));},/***@description:获取日历面板上第一个周一*@param{*}Month2022-04*@return{*}第一个周一的日期2022-03-28*/getMondayDay(Month){letnow=newDate(this.getFirstDayOfMonth(Month));letday=now.getDay()||7;returnfecha.format(newDate(now.getFullYear(),now.getMonth(),now.getDate()+1-day),"yyyy-MM-dd");},/***@description:获取某月最后一天后面最近的一个周末*@param{*}Month2022-04*@return{*}某月最后一天后面最近的一个周末2022-05-01*/getSundayDay(Month){letnow=newDate(this.getLastDayOfMonth(Month));letday=now.getDay()||7;returnfecha.format(newDate(now.getFullYear(),now.getMonth(),now.getDate()+7-day),"yyyy-MM-dd");},/***@description:获取日历面板上最后一个周末*@param{*}Month2022-04*@return{*}最后一个周末的日期2022-05-08*/getLastSundayDay(Month){letmonday=newDate(this.getMondayDay(Month));letsunday=monday.setDate(monday.getDate()+41);returnfecha.format(newDate(sunday),"yyyy-MM-dd");},/***@description:获取某月最后一天*@param{*}Month月份2022-04*@return{*}某月最后一天日期2022-04-30*/getLastDayOfMonth(Month){letcurMonth=Month.split("-");letyear=curMonth[0];letmonth=curMonth[1];returnfecha.format(newDate(year,month,0),"yyyy-MM-dd");},/***@description:获取某月第一天*@param{*}Month月份2022-04*@return{*}某月第一天日期2022-04-01*/getFirstDayOfMonth(Month){letcurMonth=Month.split("-");letyear=curMonth[0];letmonth=curMonth[1];returnfecha.format(newDate(year,month-1).setDate(1),"yyyy-MM-dd");},},};</script>Time!
