diff --git a/src/components/Core.tsx b/src/components/Core.tsx index a8a210a..eb39b8d 100644 --- a/src/components/Core.tsx +++ b/src/components/Core.tsx @@ -1,11 +1,12 @@ import type { Component, ComponentInternalInstance, InjectionKey, Ref } from "vue"; -import { defineComponent, inject, nextTick, render, provide } from "vue"; -import { ConsumerEventBus, getMaxZIndex, PromiseWithResolvers, type IOnConfig } from "./utils"; +import { defineComponent, inject, nextTick, provide, render } from "vue"; import { EVENT_NAME } from "./type"; +import { ConsumerEventBus, PromiseWithResolvers, type IOnConfig } from "./utils"; export interface ICommandComponentArrtsProviderConfig { provideProps?: Record; appendTo?: string | HTMLElement; + customClassName?: string; } export type ICommandDialogProviderConfig = ICommandComponentArrtsProviderConfig & { @@ -27,7 +28,7 @@ export interface IConsumer { /** 弹窗销毁,但是不继续推进promise的状态改变 */ destroy: (external?: boolean) => void; /** 弹窗是否可见响应式变量,虽然已经提供了hide以及show方法不需要通过该属性来控制弹窗的显示与隐藏,但是为了方便一些特殊场景,还是提供了该属性,比如你需要watch这个属性来做一些事情 */ - visible: Ref, + visible: Ref; /** 隐藏 */ hide: () => void; /** 显示 */ @@ -43,11 +44,11 @@ export interface IConsumer { /** 一般建议赋值为UI库的弹窗实例实例Ref */ componentRef?: Ref | undefined; /** 弹窗挂载的html元素 */ - container: HTMLDivElement + container: HTMLDivElement; /** 弹窗嵌套堆栈 */ - stack: IConsumer[], + stack: IConsumer[]; /** 当前在弹窗嵌套堆栈中的索引 */ - stackIndex: number + stackIndex: number; } // Consumer inject key @@ -58,20 +59,20 @@ export const CommandDialogStackInjectKey: InjectionKey = Symbol("Co const eventBus = new ConsumerEventBus(); const getProvidesChain = (ins: ComponentInternalInstance): any => ({ - ...ins.parent ? getProvidesChain(ins.parent) : {}, - ...(ins as any).provides + ...(ins.parent ? getProvidesChain(ins.parent) : {}), + ...(ins as any).provides, }); export function CommandProvider(parentInstance: ComponentInternalInstance | null, uiComponentVnode: Component, config: ICommandDialogProviderConfig): IConsumer { const appendToElement = (typeof config.appendTo === "string" ? document.querySelector(config.appendTo) : config.appendTo) || document.body; const container = document.createElement("div"); - container.className = "command-commponent-container" + container.className = config.customClassName || "command-commponent-container"; appendToElement.appendChild(container); - const MaxZIndex = getMaxZIndex(container); - // 设置节点层级,尽量让其显示出来 - container.style.position = 'relative'; - container.style.zIndex = String(Math.max(MaxZIndex + 1, 9999)); + // const MaxZIndex = getMaxZIndex(container); + // // 设置节点层级,尽量让其显示出来 + // container.style.position = 'relative'; + // container.style.zIndex = String(Math.max(MaxZIndex + 1, 9999)); const hide = () => { config.visible.value = false; @@ -84,7 +85,7 @@ export function CommandProvider(parentInstance: ComponentInternalInstance | null render(null, container); container.remove(); }); - } + }; const destroy = (external = false) => { if (external) { // 这里的事件是为了完整的关闭动画展示,如果关闭时没有触发该事件,那么将永远不会执行卸载操作,所以加入延时立即调用,保证最终一定会执行卸载操作 @@ -106,7 +107,15 @@ export function CommandProvider(parentInstance: ComponentInternalInstance | null }; const consumer: IConsumer = { - promise, resolve, reject, destroyWithResolve, destroyWithReject, hide, show, destroy, container, + promise, + resolve, + reject, + destroyWithResolve, + destroyWithReject, + hide, + show, + destroy, + container, visible: config.visible, on: (name: string | symbol, callback: Function, config: IOnConfig = {}) => eventBus.on(consumer, name, callback, config), once: (name: string | symbol, callback: Function) => eventBus.once(consumer, name, callback), @@ -114,7 +123,7 @@ export function CommandProvider(parentInstance: ComponentInternalInstance | null off: (name: string | symbol, callback: Function) => eventBus.off(consumer, name, callback), stack: [], stackIndex: -1, - componentRef: void 0 + componentRef: void 0, }; const CommandDialogProviderComponent = defineComponent({ @@ -124,11 +133,11 @@ export function CommandProvider(parentInstance: ComponentInternalInstance | null } provide(CommandDialogConsumerInjectKey, consumer); - const stack = inject(CommandDialogStackInjectKey, []) - consumer.stackIndex = stack.length - stack.push(consumer) - provide(CommandDialogStackInjectKey, stack) - consumer.stack = stack + const stack = inject(CommandDialogStackInjectKey, []); + consumer.stackIndex = stack.length; + stack.push(consumer); + provide(CommandDialogStackInjectKey, stack); + consumer.stack = stack; return () => uiComponentVnode; }, @@ -140,7 +149,7 @@ export function CommandProvider(parentInstance: ComponentInternalInstance | null vnode.appContext!.provides = { ...vnode.appContext!.provides, ...getProvidesChain(parentInstance!), - } + }; render(vnode, container); return consumer; @@ -148,16 +157,19 @@ export function CommandProvider(parentInstance: ComponentInternalInstance | null export const getConsumer = (warn: boolean = true): IConsumer => { const showWarningMessage = () => - warn && console.warn(`别调用了欧尼酱~,这会儿没啥实际用途;没有根据CommandDialogInjectKey接收到注入数据.原因可能有两个: + warn && + console.warn(`别调用了欧尼酱~,这会儿没啥实际用途;没有根据CommandDialogInjectKey接收到注入数据.原因可能有两个: 1.你可能对getConsumer进行了异步调用或条件调用,请在setup中直接调用. 2.你没有在命令弹窗内展示该组件,这个时候你一般可以忽略该警告消息.`); return inject( CommandDialogConsumerInjectKey, - () => new Proxy({} as IConsumer, { - get: () => showWarningMessage, - apply: showWarningMessage, - }), true + () => + new Proxy({} as IConsumer, { + get: () => showWarningMessage, + apply: showWarningMessage, + }), + true )!; }; diff --git a/src/main.ts b/src/main.ts index dc45f47..e083d96 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,7 +1,7 @@ import { createApp } from "vue"; import { router } from "./router"; import App from "./App.vue"; -import 'virtual:uno.css' +// import 'virtual:uno.css' // 导入vant-popup弹窗样式 import("vant/es/popup/style");