diff --git a/package/component/src/component/_components/renderFunction.ts b/package/component/src/component/_components/renderFunction.ts new file mode 100644 index 00000000..c2b70505 --- /dev/null +++ b/package/component/src/component/_components/renderFunction.ts @@ -0,0 +1,23 @@ +import { defineComponent, VNodeTypes } from "vue"; + +import type { PropType } from "vue"; + +export type RenderFunc = (props: Record) => VNodeTypes; + +export default defineComponent({ + name: "RenderFunction", + props: { + renderFunc: { + type: Function as PropType, + default: null, + }, + }, + setup(props, ctx) { + return () => { + if (typeof props.renderFunc !== "function") { + return null; + } + return props.renderFunc(ctx.attrs); + }; + }, +}); diff --git a/package/component/src/component/dropdown/TeleportWrapper.vue b/package/component/src/component/_components/teleportWrapper.vue similarity index 100% rename from package/component/src/component/dropdown/TeleportWrapper.vue rename to package/component/src/component/_components/teleportWrapper.vue diff --git a/package/component/src/component/dropdown/index.vue b/package/component/src/component/dropdown/index.vue index d0674164..2a1dc089 100644 --- a/package/component/src/component/dropdown/index.vue +++ b/package/component/src/component/dropdown/index.vue @@ -29,7 +29,7 @@ import { ElementScrollRect, DropdownContext, } from "./interface"; -import TeleportWrapper from "./TeleportWrapper.vue"; +import TeleportWrapper from "../_components/teleportWrapper.vue"; export type DropdownTrigger = "click" | "hover" | "focus" | "contextMenu"; diff --git a/package/component/src/component/space/Renderer.ts b/package/component/src/component/space/Renderer.ts deleted file mode 100644 index 6650b5ef..00000000 --- a/package/component/src/component/space/Renderer.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { defineComponent } from "vue"; - -import type { PropType } from "vue"; - -export default defineComponent({ - name: "Renderer", - props: { - renderFn: { - type: Function, - default: null, - }, - data: { - type: Object as PropType>, - default: undefined, - }, - }, - setup(props) { - return () => { - if (typeof props.renderFn !== "function") { - return null; - } - - return props.renderFn(props.data); - }; - }, -}); diff --git a/package/component/src/component/space/index.vue b/package/component/src/component/space/index.vue index 22c19472..afd7df79 100644 --- a/package/component/src/component/space/index.vue +++ b/package/component/src/component/space/index.vue @@ -17,7 +17,7 @@ import { VNodeArrayChildren, StyleValue, } from "vue"; -import Renderer from "./Renderer"; +import RenderFunction from "../_components/renderFunction"; export type SpaceSize = "lg" | "md" | "sm" | "xs" | number | string; @@ -130,6 +130,6 @@ const renderSpaceItems = () => diff --git a/package/component/src/component/tab/RenderTitle.vue b/package/component/src/component/tab/RenderTitle.vue deleted file mode 100644 index 9b6d4922..00000000 --- a/package/component/src/component/tab/RenderTitle.vue +++ /dev/null @@ -1,28 +0,0 @@ - diff --git a/package/component/src/component/tab/index.vue b/package/component/src/component/tab/index.vue index 14f423cf..5afb3832 100644 --- a/package/component/src/component/tab/index.vue +++ b/package/component/src/component/tab/index.vue @@ -9,6 +9,7 @@ import "./index.less"; import { LayIcon } from "@layui/icons-vue"; import tabItem from "../tabItem/index.vue"; import RenderTitle from "./renderTitle.vue"; +import RenderFunction from "../_components/renderFunction"; import { Component, computed, @@ -23,6 +24,8 @@ import { nextTick, CSSProperties, reactive, + h, + createTextVNode, } from "vue"; import { useResizeObserver } from "@vueuse/core"; import { TabData, TabInjectKey } from "./interface"; @@ -264,6 +267,12 @@ const update = () => { } }; +const renderTabChild = (child: TabData) => { + return child.slots?.title + ? () => h("span", child.slots?.title && child.slots.title()) + : () => createTextVNode(child.title); +}; + useResizeObserver(navRef, update); watch( @@ -329,7 +338,7 @@ provide("slotsChange", slotsChange); :class="[children.id === active ? 'layui-this' : '']" @click.stop="change(children.id)" > - + + 下拉菜单 + + 下拉菜单 + + +