--- theme: channing-cyan --- 往期精彩文章： [前后端新机遇！为什么我建议学习鸿蒙？](https://juejin.cn/post/7393173571969089576) [前端鸿蒙入门极速版：超简洁保姆级教程！纯干货，快收藏！](https://juejin.cn/post/7393606971927478287) [用云编译器半小时完成轮播组件紧急开发！被公司奖励500！](https://juejin.cn/post/7388753413309349903) [直接使用git pull拉取代码，被同事狠狠地diss了！](https://juejin.cn/post/7389650358539255845) [快收藏！超实用标签title属性重写，让同事对你刮目相看](https://juejin.cn/post/7390735346848792610) # 简介 `大家好，我是石小石！`在大屏开发中，我们可能会遇到日历组件的使用，然而，对于一些定制化的大屏，传统的第三方UI组件很难满足我们的样式要求。 ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/68ad7af6653a44b0ab1011ac74dfc0fc~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55-z5bCP55-zT3J6:q75.awebp?rk3s=f64ab15b&x-expires=1757274330&x-signature=82%2FknYuI3Jy5k21wnO0mIFio1Jo%3D) 这个时候，我们一般有两个选择： > - 说服UI和老板，使用第三方组件(客户吐槽，最终可能要改) > - 强行改组件库UI样式，让自己痛不欲生 **实际上，大屏使用的日历组件大多只是展示使用，业务简单，我们手搓一个其实非常简单，最重要的是，样式完全可以自定义！** 这篇文章，我将向大家展示如何封装一个vue日历组件，可以直接引入使用。它的样式功能如下 - 基本日期展示 - 时间切换 - 禁用未来时间 - 高亮当前样式 - .... ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/2a22dbdfcf2046afb249dd5676ce8d47~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55-z5bCP55-zT3J6:q75.awebp?rk3s=f64ab15b&x-expires=1757274330&x-signature=Ux4kLAPjffhLS5KJIlV8ixF3OaY%3D) # 核心思路分析日历组件的核心其实是**每页日期数据的生成**，日期数据是一个**7*6的一维列表**，我们只要计算出这个列表的第一项日期数据，后面的日期依次加1即可。其次，就是一些简单的样式处理，非当前月的日期进行置灰即可。 ## 页面的数据结构为了便于页面的渲染，我们可以将7*6的日期列表封装到一个数组里，数组的每一行对应日期的每一行数据 ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/0081887d47594bceaba2590eb4f3d702~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55-z5bCP55-zT3J6:q75.awebp?rk3s=f64ab15b&x-expires=1757274330&x-signature=XIp8vBqbkCVWkjowKS8Vv3OH0co%3D) 为了便于后续的样式拓展，我们可以给每个日期对象增加一些数据，比如 ```js { // 显示的标签 label: '30', // 标签对应的实际数据 date: '2024-06-30', // 是否被选中 active: false, // 是否当前日期 isCurrent: false } ``` 那么，一个比较完整的日期列表数据，结构就应该如下 ```js [ { "time": "2024-06-30", "children": [ { "label": "30", "date": "2024-06-30", "active": false, "isCurrent": false }, { "label": "1", "date": "2024-07-01", "active": true, "isCurrent": false }, { "label": "2", "date": "2024-07-02", "active": true, "isCurrent": false }, { "label": "3", "date": "2024-07-03", "active": true, "isCurrent": false }, { "label": "4", "date": "2024-07-04", "active": true, "isCurrent": false }, { "label": "5", "date": "2024-07-05", "active": true, "isCurrent": false }, { "label": "6", "date": "2024-07-06", "active": true, "isCurrent": false } ] }, { "time": "2024-07-07",//第二行起始日期 "children": [] // 内容省略，格式同第一条数据 }, { "time": "2024-07-14",//第三行起始日期 "children": [] }, { "time": "2024-07-21",//第四行起始日期 "children": [] }, { "time": "2024-07-28",//第五行起始日期 "children": [] }, { "time": "2024-08-04",//第六行起始日期 "children": [] } ] ``` ## 如何生成日期列表要生成日期列表，最核心的就是找到当前选中年月的日历面板的起始日期。比如，我们选中2024年7月，我们的核心就是计算出当前面板的第一个标签的时间。 ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/88536c72ecf64e0c8b76eb89abd67288~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55-z5bCP55-zT3J6:q75.awebp?rk3s=f64ab15b&x-expires=1757274330&x-signature=4RyNfd3JkKrzPTJdbhLjowYVlfY%3D) 要计算当前日历面板的第一个时间，我们可以先找到当前选中年月的1号时间 ```js const year = ref(dayjs().year()) const month = ref（dayjs().month() + 1) // 获取当前选中月份的1号 let selectDay = `${year.value}-${month.value}-01` ``` 然后，我们可以计算出选中月是周几，便可以计算出起始时间 ```js // 选中时间是周几 const weekDay = dayjs(selectDay).day() // 日历组件的起始日期 const firstDay = dayjs(selectDay).subtract(weekDay, 'day') ``` 接下来，我们遍历生成整个日期列表即可 ```js // 生成日期列表 const getTimeListByYearAndMonth = () => { // 获取当前选中月份的1号 let selectDay = `${year.value}-${month.value}-01`; // 构造当前选中年份和月份的第一天日期字符串 // 选中时间是周几 const weekDay = dayjs(selectDay).day(); // 获取当前选中日期是星期几（0-6，周日为0） // 日历组件的起始日期 const firstDay = dayjs(selectDay).subtract(weekDay, 'day'); // 计算出日历显示的第一天，减去当前星期几的天数，得到上个月的最后几天或本月的第一天 // 初始化日期列表数组 const dayList = []; // 遍历6周 for (let i = 0; i < 6; i++) { // 初始化每周的日期数组 const childrenList = []; // 遍历每周的7天 for (let time = 0; time < 7; time++) { // 计算当前日期 let day = dayjs(firstDay).add(i * 7 + time, "day"); // 格式化当前日期为字符串 const date = day.format("YYYY-MM-DD"); childrenList.push({ label: day.format("D"), // 获取当前日期的日 date, // 当前日期的完整格式 // 判断当前日期是否属于选中的月份 active: Number(day.format("M")) == month.value, // 判断当前日期是否是今天 isCurrent: date === dayjs().format("YYYY-MM-DD") }); } dayList.push({ // 当前周的第一天日期 time: dayjs(firstDay).add(i * 7, "day").format("YYYY-MM-DD"), // 当前周的所有日期 children: childrenList }); } // 返回生成的日期列表 return dayList; } ``` # 技术方案 ## 基础样式搭建日历组件的样式其实非常简单，无非就是头部切换功能样式，和主体日历时间部分样式，这部分大家完全可以按照业务情况自己开发。 ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/6f810cb8d9394751b324349bc05e2b74~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55-z5bCP55-zT3J6:q75.awebp?rk3s=f64ab15b&x-expires=1757274330&x-signature=7VxyVPZd5bXmwvoMyezT0TaMR2s%3D) ## 组件参数设计作为一个公用组件，一些核心的组件props参数是必不可少的，这个组件可以传递默认选中的年份year、月份month，以及一些灵活的拓展参数：是否禁用未来日期disabledFutureDay、是否高亮当前日期highlightCurrentDay等等。相应的，它还需要一些核心的emit事件抛出，如年份切换事件yearChange、月份切换事件 monthChange、日期切换事件dateChange。 ```js interface Props { year?: number month?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 // 是否禁用未来日期 disabledFutureDay?: boolean // 是否高亮当前日期 highlightCurrentDay?: boolean } interface TimeEmitInfo { year: number, month: number, date: number | null, time: string } const props = withDefaults(defineProps(), { year: dayjs().year(), month: dayjs().month() + 1, disabledFutureDay: true, highlightCurrentDay: true, }) const emit = defineEmits<{ yearChange: [params: TimeEmitInfo], monthChange: [params: TimeEmitInfo], dateChange: [params: TimeEmitInfo] }>() ``` ## 日期生成与页面渲染日期的生成我们在【思路分析】章节已经详细分析过，结合数据渲染，他的页面结构和核心代码如下 ```js ``` ```js ``` 注意，上述代码中的年月切换箭头采用了其他UI库，实际使用时，需要进行替换。 **效果演示** ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/107b2545da7446298ad3b6945d77e233~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55-z5bCP55-zT3J6:q75.awebp?rk3s=f64ab15b&x-expires=1757274330&x-signature=Iy6ZFeNHu%2BSOjjjV2t3iwy2bolQ%3D) # 总结 > 本文分享了一个日历组件的实现方案，样式、功能都比较完备，是一个可以直接在项目中使用的组件。大家可以根据自己的业务需求、样式进行适当调整。