fix(render): props key kebab-case transform to camelCase

jevin98 · jevin98 · commit 7e63441051fb · 2025-04-28T19:45:31.000+08:00
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -26,6 +26,7 @@ export default antfu(
 
     rules: {
       "ts/no-unsafe-function-type": "off",
+      "ts/prefer-literal-enum-member": "off",
     },
   },
 );
diff --git a/packages/component/component/_components/__tests__/render.test.tsx b/packages/component/component/_components/__tests__/render.test.tsx
@@ -0,0 +1,34 @@
+import { describe, expect, test } from "vitest";
+import {defineComponent, nextTick} from 'vue'
+import { mount } from "@vue/test-utils";
+
+import LayRender from "../render";
+
+const CustomComponent = defineComponent({
+  setup(props, ctx) {
+    return () => (
+      <div class='custom-class'>
+        <LayRender slots={ctx.slots} render='default' row-index={1}></LayRender>
+      </div>
+    )
+  },
+})
+
+describe("LayRender.vue", () => {
+  test("作用域slot，参数名应保持为camelize形式", async () => {
+    const wrapper = mount({
+      setup() {
+        return () => (
+          <CustomComponent
+            v-slots={{
+              default: ({rowIndex}: {rowIndex: number}) => rowIndex + 1
+            }}
+          ></CustomComponent>
+        );
+      },
+    });
+    
+    const dom = wrapper.find('.custom-class')
+    expect(dom.text()).toBe('2');
+  });
+});
diff --git a/packages/component/component/_components/render.ts b/packages/component/component/_components/render.ts
@@ -1,5 +1,6 @@
 import type { PropType, Slots, VNodeTypes } from "vue";
 
+import { normalizeProps } from "@layui/component/utils";
 import { defineComponent } from "vue";
 
 type RenderFunc = (props: Record<string, unknown>) => VNodeTypes;
@@ -20,9 +21,9 @@ export default defineComponent({
   setup(props, ctx) {
     return () => {
       if (typeof props.render === "string") {
-        return (props.slots)?.[props.render]?.(ctx.attrs);
+        return (props.slots)?.[props.render]?.(normalizeProps(ctx.attrs));
       }
-      return (props.render as RenderFunc)(ctx.attrs);
+      return (props.render as RenderFunc)(normalizeProps(ctx.attrs));
     };
   },
 });
diff --git a/packages/component/utils/vueUtil.ts b/packages/component/utils/vueUtil.ts
@@ -22,23 +22,17 @@ export enum ShapeFlags {
   COMPONENT_KEPT_ALIVE = 1 << 9,
 }
 
-export const isElement = (vn: VNode) => {
+export function isElement(vn: VNode) {
   return Boolean(vn && vn.shapeFlag & ShapeFlags.ELEMENT);
-};
+}
 
-export const isComponent = (
-  vn: VNode,
-  type?: VNodeTypes
-): type is Component => {
+export function isComponent(vn: VNode, type?: VNodeTypes): type is Component {
   return Boolean(vn && vn.shapeFlag & ShapeFlags.COMPONENT);
-};
+}
 
-export const isArrayChildren = (
-  vn: VNode,
-  children: VNode["children"]
-): children is VNode[] => {
+export function isArrayChildren(vn: VNode, children: VNode["children"]): children is VNode[] {
   return Boolean(vn && vn.shapeFlag & ShapeFlags.ARRAY_CHILDREN);
-};
+}
 
 /**
  * 同时支持驼峰命名和破折号命名的插槽，示例：back-icon 和 backIcon
@@ -51,37 +45,38 @@ export function convertSlotName(vm: ComponentInternalInstance, name: string) {
   return vm.slots[camelCaseName]
     ? camelCaseName
     : vm.slots[kebabCaseName]
-    ? kebabCaseName
-    : name;
+      ? kebabCaseName
+      : name;
 }
 
 export function kebabCase(key: string) {
   const result = key.replace(/([A-Z])/g, " $1").trim();
   return result.split(" ").join("-").toLowerCase();
 }
 
-export const flattedVNode = (children: VNode[]) => {
+export function flattedVNode(children: VNode[]) {
   const vNodes = isArray(children) ? children : [children];
   const result: VNode[] = [];
 
   vNodes.forEach((vNode) => {
     if (isArrayChildren(vNode, vNode.children)) {
       result.push(...flattedVNode(vNode.children));
-    } else {
+    }
+    else {
       result.push(vNode);
     }
   });
 
   return result;
-};
+}
 
 /**
  * 将props对象的key从kebab-case转换为camelCase
  * @param props props集合
  */
-export const normalizeProps = <T extends Record<string, any>>(props: T): T => {
+export function normalizeProps<T extends Record<string, any>>(props: T): T {
   return Object.keys(props).reduce((pre, next) => {
     pre[camelize(next) as keyof T] = props[next];
     return pre;
   }, {} as T);
-};
+}
