MES/vue-mod-page
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

更新配置项，更新Receiver入参，修复渲染错误

Browse Source
This commit is contained in:
陈梓阳
2025-05-13 16:15:11 +08:00
parent 5d2af32d68
commit 0c75dca9c3
7 changed files with 708 additions and 730 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/DemiHelper.ts
View File

@@ -1,8 +1,7 @@
import * as Vue3 from "vue";
// @ts-ignore
import { h, isVue2, isVue3, type VNode, type VNodeChildren, type VNodeData } from "vue-demi";
import { ComponentInternalInstance, h, isVue2, isVue3, type VNode, type VNodeChildren, type VNodeData } from "vue-demi";
import { InvokerItem } from "./InvokerItem";
import { ComponentInternalInstance } from "vue-demi/lib/v2/index.js";
function splitAttrs(obj: object) : { attrs: Record<string, any>, on: Record<string, any> } {
const attrs: Record<string, any> = {};
@@ -21,8 +20,8 @@ function splitAttrs(obj: object) : { attrs: Record<string, any>, on: Record<stri
/**
* 将扁平化的组件数据对象分离为Vue2形式的data对象
* @param rawData
* @returns
* @param rawData
* @returns
*/
function splitVue2Data(rawData?: Record<string, any> | null) {
console.warn("Handling Vue2 data: ", rawData);
@@ -54,11 +53,11 @@ function splitVue2Data(rawData?: Record<string, any> | null) {
/**
* 渲染具名插槽
* @param slotFn
* @param args
* @returns
* @param slotFn
* @param args
* @returns
*/
function renderSlot(slotFn: Function, args: any, ctx?: ComponentInternalInstance) {
function renderSlot(slotFn: Function, args: any, renderFunction?: Function) {
let child: string | Array<InvokerItem> | InvokerItem = slotFn(args);
// console.warn("Rendering Slot: ", child);
// 字符串情况
@@ -67,17 +66,18 @@ function renderSlot(slotFn: Function, args: any, ctx?: ComponentInternalInstance
}
// Array<InvokerItem>情况
else if (Array.isArray(child)) {
return child.map((c: InvokerItem) => hh(c.tag, c.data, c.children, ctx));
return child.map((c: InvokerItem) => hh(c.tag, c.data, c.children, renderFunction));
}
// InvokerItem情况
else {
return hh(child.tag, child.data, child.children, ctx);
return hh(child.tag, child.data, child.children, renderFunction);
}
}
export function hh(tag: string, data?: Record<string, any> | null, children?: string | Array<InvokerItem> | Record<string, Function>, ctx?: ComponentInternalInstance) {
export function hh(tag: string | object, data?: Record<string, any> | null, children?: string | Array<InvokerItem> | Record<string, Function>, renderFunction?: Function) {
// 适配Vue2渲染函数结构
// console.debug("Rendering", tag, data, children, `Vue Version: ${isVue2 ? 'Vue2' : 'Vue3'}`);
const render = renderFunction || h;
// 处理tag
let processedTag: string | object = tag;
@@ -103,7 +103,8 @@ export function hh(tag: string, data?: Record<string, any> | null, children?: st
}
// 子节点列表则递归处理
else if (Array.isArray(children)) {
processedChildren = children.map(child => hh(child.tag, child.data, child.children, ctx));
processedChildren = children.map(child => hh(child.tag, child.data, child.children, renderFunction));
console.warn("Processed Children: ", processedChildren);
}
// 处理具名插槽对象
else if (children && typeof children == 'object') {
@@ -111,7 +112,7 @@ export function hh(tag: string, data?: Record<string, any> | null, children?: st
processedChildren = Object.fromEntries(
Object.entries(children).map(([name, slotFn]) => [
name,
(args) => renderSlot(slotFn, args, ctx)
(args) => renderSlot(slotFn, args, renderFunction)
])
)
}
@@ -121,13 +122,15 @@ export function hh(tag: string, data?: Record<string, any> | null, children?: st
Object.entries(children).map(([name, slotFn]) => [
name,
(args) => {
return renderSlot(slotFn, args);
return renderSlot(slotFn, args, renderFunction);
}
])
);
}
}
console.debug("Processed", processedTag, processedData, processedChildren);
return h(processedTag, processedData, processedChildren);
}
console.debug("Processed", {
processedTag, processedData, processedChildren
});
return render(processedTag, processedData, processedChildren);
}