mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-09-05 23:56:42 +08:00
优化 FormRender 组件的渲染逻辑,增强对插槽和内容的支持,简化模板结构
This commit is contained in:
@@ -80,14 +80,15 @@ const renderComponent = (config: any, model: any, slotScope: any = {}) => {
|
|||||||
// 动态插槽解析
|
// 动态插槽解析
|
||||||
const slotNodes: Record<string, any> = {}
|
const slotNodes: Record<string, any> = {}
|
||||||
for (const [slotName, slotContent] of Object.entries(slots)) {
|
for (const [slotName, slotContent] of Object.entries(slots)) {
|
||||||
slotNodes[slotName] = (slotScopeData: any) => renderSlotContent(slotContent, model, slotScopeData)
|
slotNodes[slotName] = (slotScopeData: any) =>
|
||||||
|
renderSlotContent(slotContent, model, { ...slotScope, ...slotScopeData })
|
||||||
}
|
}
|
||||||
|
|
||||||
// 渲染组件内容
|
// 渲染组件内容
|
||||||
const renderContent = () => {
|
const renderContent = () => {
|
||||||
// 如果配置了 `html`,直接渲染为 HTML 内容
|
// 如果配置了 `html`,直接渲染为 HTML 内容
|
||||||
if (html) {
|
if (html) {
|
||||||
return h('div', { innerHTML: typeof html === 'string' ? html : model[html] })
|
return h(Component, { innerHTML: typeof html === 'string' ? html : model[html] })
|
||||||
}
|
}
|
||||||
|
|
||||||
// 如果配置了 `text`,直接渲染为文本内容
|
// 如果配置了 `text`,直接渲染为文本内容
|
||||||
@@ -97,7 +98,7 @@ const renderComponent = (config: any, model: any, slotScope: any = {}) => {
|
|||||||
|
|
||||||
// 如果配置了 `content`,递归渲染子组件
|
// 如果配置了 `content`,递归渲染子组件
|
||||||
if (Array.isArray(content)) {
|
if (Array.isArray(content)) {
|
||||||
return content.map((childConfig: any) => renderComponent(childConfig, model))
|
return content.map((childConfig: any) => renderComponent(childConfig, model, slotScope))
|
||||||
}
|
}
|
||||||
|
|
||||||
return null
|
return null
|
||||||
@@ -106,14 +107,11 @@ const renderComponent = (config: any, model: any, slotScope: any = {}) => {
|
|||||||
// 渲染组件
|
// 渲染组件
|
||||||
return h(Component, parsedProps, {
|
return h(Component, parsedProps, {
|
||||||
...slotNodes,
|
...slotNodes,
|
||||||
default: renderContent, // 确保默认插槽只包含当前组件的内容
|
default: renderContent,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<!-- 调用递归渲染函数 -->
|
<Component :is="renderComponent(config, model)" />
|
||||||
<div>
|
|
||||||
<Component :is="renderComponent(config, model)" />
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user