chore: 移除废弃的 CompConsumer 组件
This commit is contained in:
parent
2108c04388
commit
ac3f53f86b
@ -1,67 +0,0 @@
|
||||
import { type VNode, cloneVNode, createVNode, defineComponent, h, KeepAlive } from "vue"
|
||||
import { useRoute } from "vue-router"
|
||||
import { useTagsViewStore } from "@/store/modules/tags-view"
|
||||
|
||||
interface CompConsumerProps {
|
||||
component: VNode
|
||||
}
|
||||
|
||||
/** 定义 compMap 对象,用于存储路由名称和对应的组件 */
|
||||
const compMap = new Map<string, VNode>()
|
||||
|
||||
/**
|
||||
* CompConsumer 组件
|
||||
* 用法:替换 <keep-alive> 标签以及内部代码,变成:<CompConsumer :component="Component" />
|
||||
* 优点:缓存路由时只需写路由 Name,无需再写组件 Name
|
||||
* 缺点:当路由表有动态路由匹配时(指向同一个组件),会出现复用组件的情况(例如修改 /info/1 时 /info/2 也会跟着改变)
|
||||
*/
|
||||
export const CompConsumer = defineComponent(
|
||||
(props: CompConsumerProps) => {
|
||||
const tagsViewStore = useTagsViewStore()
|
||||
const route = useRoute()
|
||||
return () => {
|
||||
// 获取传入的组件
|
||||
const component = props.component
|
||||
// 判断当前是否包含 name,如果不包含 name,那就直接处理掉 name
|
||||
if (!route.name) return component
|
||||
// 获取当前组件的名称
|
||||
const compName = (component.type as any)?.name
|
||||
// 获取当前路由的名称
|
||||
const routeName = route.name as string
|
||||
let Comp: VNode
|
||||
// 检查 compMap 中是否已经存在对应的组件
|
||||
if (compMap.has(routeName)) {
|
||||
// 如果存在,则直接使用该组件进行渲染
|
||||
Comp = compMap.get(routeName)!
|
||||
} else {
|
||||
// 如果不存在,则克隆传入的组件并创建一个新的组件,将其添加到 compMap 中
|
||||
const node = cloneVNode(component)
|
||||
if (compName && compName === routeName) {
|
||||
;(node.type as any).name = `__${compName}__CUSTOM_NAME`
|
||||
}
|
||||
// @ts-expect-error this is VNode
|
||||
Comp = defineComponent({
|
||||
name: routeName,
|
||||
setup() {
|
||||
return () => node
|
||||
}
|
||||
})
|
||||
compMap.set(routeName, Comp)
|
||||
}
|
||||
// 使用 createVNode 函数创建一个 KeepAlive 组件,并缓存 cachedViews 数组中对应的组件
|
||||
return createVNode(
|
||||
KeepAlive,
|
||||
{
|
||||
include: tagsViewStore.cachedViews
|
||||
},
|
||||
{
|
||||
default: () => h(Comp)
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "CompConsumer",
|
||||
props: ["component"]
|
||||
}
|
||||
)
|
Loading…
x
Reference in New Issue
Block a user