From 7600e4f1e57c645ce74a5ac5bddeb82bc8739ab8 Mon Sep 17 00:00:00 2001 From: morning-star <26325820+Sight-wcg@users.noreply.github.com> Date: Sat, 4 May 2024 17:04:56 +0800 Subject: [PATCH] =?UTF-8?q?feat(laydate):=20=E6=96=B0=E5=A2=9E=20cellRende?= =?UTF-8?q?r=20=E9=80=89=E9=A1=B9=EF=BC=8C=E7=94=A8=E4=BA=8E=E8=87=AA?= =?UTF-8?q?=E5=AE=9A=E4=B9=89=E5=8D=95=E5=85=83=E6=A0=BC=E5=86=85=E5=AE=B9?= =?UTF-8?q?=20(#1843)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(laydate): 新增 cellRender 选项，用于自定义单元格内容 * docs(laydate): 添加 cellRender 文档 * chore: 调整示例顺序 * chore: 采用 stackblitz 原示例，提升扩展内容的丰富性 注： HTML 出现换行且缩进，会被 markdown 解析器解析为 code，因此删除了换行和最外层缩进 * chore: 注释示例中的若干选项 * chore: 解除若干选项的注释 * chore: 改进 cellRender 文档示例的可读性 * refactor(laydate): cellRender 第一个参数由数组改为对象 * docs(laydate): 改进 cellRender 文档可读性 --------- Co-authored-by: 贤心 <3277200+sentsim@users.noreply.github.com> --- docs/laydate/detail/demo.md | 13 ++- docs/laydate/detail/options.md | 23 +++++ docs/laydate/examples/cell.md | 178 +++++++++++++++++++++++++++++++++ src/modules/laydate.js | 28 ++++++ 4 files changed, 239 insertions(+), 3 deletions(-) create mode 100644 docs/laydate/examples/cell.md diff --git a/docs/laydate/detail/demo.md b/docs/laydate/detail/demo.md index 3593ddb9..0052423b 100644 --- a/docs/laydate/detail/demo.md +++ b/docs/laydate/detail/demo.md @@ -79,7 +79,6 @@ -

自定义主题

@@ -88,10 +87,18 @@
-

直接静态显示

+

静态显示

   
-
\ No newline at end of file + + +

扩展农历 🔥

+ +
+  
+
diff --git a/docs/laydate/detail/options.md b/docs/laydate/detail/options.md index b11fed89..2a699073 100644 --- a/docs/laydate/detail/options.md +++ b/docs/laydate/detail/options.md @@ -715,6 +715,29 @@ holidays: function (ymd, render) { - +cellRender 2.9.9+ + + +自定义单元格内容。 + +``` +cellRender: function(ymd, render, info){ + var y = ymd.year; + var m = ymd.month; + var d = ymd.date; + + // 面板类型 'year' | 'month' | 'date' + if(info.type === 'date'){ + render(d); // 参数为 string, HTMLElement, JQuery 类型 + } +} +``` + + +function + - + + diff --git a/docs/laydate/examples/cell.md b/docs/laydate/examples/cell.md new file mode 100644 index 00000000..c2415648 --- /dev/null +++ b/docs/laydate/examples/cell.md @@ -0,0 +1,178 @@ + + + + + + + Document + + + + +
+ + + + + diff --git a/src/modules/laydate.js b/src/modules/laydate.js index 702863b1..a9ce0555 100644 --- a/src/modules/laydate.js +++ b/src/modules/laydate.js @@ -1186,6 +1186,31 @@ return that; }; + /** + * 自定义单元格 + * @param {HTMLElement|Array} el - 单元格元素 + * @param {{year:number, month:number, date:number}} dateObj - 当前单元格对应的日期信息 + * @param {'year' | 'month' | 'date'} panelMode - 面板模式 + * @returns + */ + Class.prototype.cellRender = function(el, dateObj, panelMode){ + var that = this; + var options = that.config; + + if(typeof options.cellRender === 'function'){ + var render = function(content){ + if(typeof content === 'string'){ + lay(el).html(content); + }else if(typeof content === 'object'){ + lay(el).html('').append(lay(content)[0]); + } + } + options.cellRender(dateObj, render, {originElem: el, type: panelMode}) + } + + return that; + } + /** * 给定年份的开始日期 * @param {Date} date @@ -1465,6 +1490,7 @@ rangeType: index, disabledType: 'date' // 日面板，检测当前日期是否禁用 }); + that.cellRender(item, {year: YMD[0], month: YMD[1], date: YMD[2]}, 'date'); }); //同步头部年月 @@ -1612,6 +1638,7 @@ rangeType: index, disabledType: 'date' // 年面板，检测当前年份中的所有日期是否禁用 }); + that.cellRender(li, {year: yearNum, month: 1, date: 1}, 'year'); yearNum++; }); @@ -1651,6 +1678,7 @@ rangeType: index, disabledType: 'date' // 月面板，检测当前月份中的所有日期是否禁用 }); + that.cellRender(li, {year: listYM[0], month: i + 1, date: 1}, 'month'); }); lay(elemYM[isCN ? 0 : 1]).attr('lay-ym', listYM[0] + '-' + listYM[1])