日历组件代码重构成组合式api

src/calendar/calendar-cell.tsx

@@ -1,12 +1,14 @@
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
 import dayjs from 'dayjs';
 import { emitEvent } from '../utils/event';
 
 import { usePrefixClass, useCommonClassName } from '../config-provider';
 
+import { useCalendarCellClass } from './hook';
+
 // 组件相关的自定义类型
 import { CalendarCell } from './type';
-import { renderTNodeJSXDefault, renderTNodeJSX } from '../utils/render-tnode';
+import { renderContent } from '../utils/render-tnode';
 
 const clickTypeEmitEventMap = {
   click: 'click',
@@ -32,81 +34,80 @@ export default defineComponent({
     },
     t: Function,
     global: Object,
-    cell: Function,
+    cell: [String, Function],
   },
   emits: ['click', 'dblclick', 'rightclick'],
-  setup() {
-    const COMPONENT_NAME = usePrefixClass('calendar');
-    const classPrefix = usePrefixClass();
+  setup(props) {
+    const cls = useCalendarCellClass();
     const { STATUS } = useCommonClassName();
-    return {
-      STATUS,
-      COMPONENT_NAME,
-      classPrefix,
-    };
-  },
-  computed: {
-    allowSlot(): boolean {
-      return this.theme === 'full';
-    },
-    disabled(): boolean {
-      return this.item.mode === 'month' && this.item.belongTo !== 0;
-    },
-    valueDisplay(): string {
-      if (this.item.mode === 'month') {
-        const dateNum = this.item.date.getDate();
-        const fillZero = dateNum < 10 && (this.fillWithZero ?? this.global.fillWithZero ?? true);
+
+    const valueDisplay = computed<string>(() => {
+      if (props.item.mode === 'month') {
+        const dateNum = props.item.date.getDate();
+        const fillZero = dateNum < 10 && (props.fillWithZero ?? props.global.fillWithZero ?? true);
         return fillZero ? `0${dateNum}` : dateNum;
       }
-      const map = this.t(this.global.cellMonth).split(',');
-      return map[this.item.date.getMonth().toString()];
-    },
-    cellCls(): Record<string, any> {
-      const { mode, date, formattedDate, isCurrent } = this.item;
+      const map = props.t(props.global.cellMonth).split(',');
+      return map[props.item.date.getMonth().toString()];
+    });
+    const allowSlot = computed<boolean>(() => {
+      return props.theme === 'full';
+    });
+    const disabled = computed<boolean>(() => {
+      return props.item.mode === 'month' && props.item.belongTo !== 0;
+    });
+    const cellCls = computed(() => {
+      const { mode, date, formattedDate, isCurrent } = props.item;
       const isNow =
         mode === 'year' ? new Date().getMonth() === date.getMonth() : formattedDate === dayjs().format('YYYY-MM-DD');
       return [
-        `${this.COMPONENT_NAME}__table-body-cell`,
+        cls.tableBodyCell.value,
         {
-          [this.STATUS.disabled]: this.disabled,
-          [this.STATUS.checked]: isCurrent,
-          [`${this.COMPONENT_NAME}__table-body-cell--now`]: isNow,
+          [STATUS.value.disabled]: disabled.value,
+          [STATUS.value.checked]: isCurrent,
+          [cls.tableBodyCell4Now.value]: isNow,
         },
       ];
-    },
+    });
+
+    return {
+      STATUS,
+      cls,
+      cellCls,
+      valueDisplay,
+      allowSlot,
+      disabled,
+    };
   },
-  methods: {
-    clickCell(e: MouseEvent) {
+  render() {
+    const { item, cellCls, valueDisplay, allowSlot } = this;
+
+    const clickCell = (e: MouseEvent): void => {
       if (this.disabled) return;
       emitEvent(this, clickTypeEmitEventMap[e.type], e);
-    },
-  },
-  render() {
-    // const { item, cellCls, clickCell, dblclick, contextmenuClick, valueDisplay, allowSlot } = this;
-    const { item, cellCls, clickCell, valueDisplay, allowSlot } = this;
+    };
 
-    const defaultNode = () => (
-      <span>
-        <div class={`${this.COMPONENT_NAME}__table-body-cell-display`}>{valueDisplay}</div>
-        <div class={`${this.COMPONENT_NAME}__table-body-cell-content`}>
+    const renderDefaultNode = () => (
+      <>
+        <div class={this.cls.tableBodyCellDisplay.value}>{valueDisplay}</div>
+        <div class={this.cls.tableBodyCellCsontent.value}>
           {allowSlot &&
-            renderTNodeJSX(this, 'cellAppend', {
-              params: item,
+            renderContent(this, 'cellAppend', undefined, {
+              params: { ...item },
             })}
         </div>
-      </span>
+      </>
     );
-
     return (
       item && (
-        <div class={cellCls} onClick={clickCell} ondblclick={clickCell} oncontextmenu={clickCell}>
+        <td class={cellCls} onClick={clickCell} ondblclick={clickCell} oncontextmenu={clickCell}>
           {typeof this.cell === 'function'
             ? this.cell(item)
-            : renderTNodeJSXDefault(this, 'cell', {
-                defaultNode: defaultNode(),
-                params: item,
+            : renderContent(this, 'cell', undefined, {
+                defaultNode: renderDefaultNode(),
+                params: { ...item },
               })}
-        </div>
+        </td>
       )
     );
   },