自定义农历日期进阶版：vue3使用v |
您所在的位置：网站首页 › 会显示节假日的日历吗 › 自定义农历日期进阶版：vue3使用v |
自定义农历日期进阶版：vue3使用v
|
效果
之前有一篇文章根据v-calendar来写日历，但是只显示了阳历日期，后面需求增加，还要加上农历 首先看看效果，节假日标红了
v-calendar的插槽
npm i lunar-calendar 使用,组件内使用 import LunarCalendar from 'lunar-calendar'; body部分代码，是将显示农历的span标签定位到日历上 {{ day.day }} {{ getLunarDate(day.id) }}js部分 就是把 getLunarDate(day.id)实现出来，调用LunarCalendar.solarToLunar函数自动计算，最后只需要判断返回节日还是农历日期 const getLunarDate = (solarDate) => { const dateArray = solarDate.split('-'); const year = parseInt(dateArray[0]); const month = parseInt(dateArray[1]); const day = parseInt(dateArray[2]); // 切割成单独的 const lunarDate = LunarCalendar.solarToLunar(year, month, day); // lunarDate打印出来是一串对象 return lunarDate.solarFestival // 用的是三目运算进行判断 ? lunarDate.solarFestival.charAt( // 如果存在lunarDate.solarFestival判断最后一个字符 lunarDate.solarFestival.split('').length - 1 //是不是‘节’结尾，因为有很多其它很长的 ) == '节' //返回结果，不是我们需要的 ? lunarDate.solarFestival.split(' ')[0] : lunarDate.lunarDayName : lunarDate.lunarFestival ? lunarDate.lunarFestival.charAt( lunarDate.lunarFestival.split('').length - 1 ) == '节' ? lunarDate.lunarFestival.split(' ')[0] : lunarDate.lunarDayName : lunarDate.lunarDayName; // 返回农历对象 }; 注意注意最后一个问题就是节假日标红，我使用的css样式来控制，用的是Less语言 在body中我给span加了一个data-content,代码截图
|
【本文地址】