fix: 修复层级显示问题,并提供全局挂载点

pandavips · Oct 10, 2024 · cdb617f · cdb617f
1 parent 74984ce
commit cdb617f
Show file tree

Hide file tree

Showing 13 changed files with 108 additions and 26 deletions.
diff --git a/components.d.ts b/components.d.ts
@@ -0,0 +1,17 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElDivider: typeof import('element-plus/es')['ElDivider']
+    ElLink: typeof import('element-plus/es')['ElLink']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}
diff --git a/index.html b/index.html
@@ -1,9 +1,15 @@
 <!doctype html>
 <html lang="en" class="dark">
 
+
 <head>
   <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="viewport"
+    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
+  <!-- 开启顶部安全区适配 -->
+  <van-nav-bar safe-area-inset-top />
+  <!-- 开启底部安全区适配 -->
+  <van-number-keyboard safe-area-inset-bottom />
   <title>example</title>
 </head>
 

diff --git a/package.json b/package.json
@@ -31,14 +31,15 @@
     "sass": "^1.79.4",
     "semantic-release": "^21.0.1",
     "typescript": "^5.5.3",
+    "unplugin-vue-components": "^0.27.4",
     "unplugin-vue-router": "^0.10.8",
     "vant": "~4.9.7",
     "vite": "^5.4.1",
     "vite-plugin-dts": "^4.2.2",
     "vue": "^3.5.3",
     "vue-router": "^4.4.5",
     "vue-tsc": "^2.0.29",
-    "vue3-command-dialog": "~1.1.5"
+    "vue3-command-dialog": "~1.1.6"
   },
   "peerDependencies": {
     "element-plus": "2.x",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/Core.tsx b/src/components/Core.tsx
@@ -68,9 +68,10 @@ export function CommandDialogProvider(parentInstance: ComponentInternalInstance
   container.className = "command-commponent-container"
 
   appendToElement.appendChild(container);
-  const zIndex = getMaxZIndex(container);
+  const MaxZIndex = getMaxZIndex(container);
+  // 设置节点层级,尽量让其显示出来
   container.style.position = 'relative';
-  container.style.zIndex = String(zIndex + 1);
+  container.style.zIndex = String(Math.max(MaxZIndex + 1, 9999));
 
   const hide = () => {
     config.visible.value = false;

diff --git a/src/components/ElementPlusDialog.tsx b/src/components/ElementPlusDialog.tsx
@@ -5,6 +5,9 @@ import type { ICommandDialogArrtsProviderConfig } from "./Core";
 import { CommandDialogProvider } from "./Core";
 import { busName2EventName, eventName2BusName } from "./utils";
 import { EVENT_NAME } from "./type";
+// 引入dialog组件的样式
+import "element-plus/es/components/dialog/style/css";
+
 
 export type IElementPlusConfig = {
   // 目标ui库目标组件的插槽
@@ -26,6 +29,13 @@ export type IElementPlusConfig = {
 
 } & ICommandDialogArrtsProviderConfig & Record<string, any>;
 
+
+// ElementPlusDialog全局挂载点
+let mountNode: HTMLElement | undefined = void 0
+export const setMountNode = (node: HTMLElement | undefined) => {
+  mountNode = node
+}
+
 export const createElementPlusDialog = (immediately = true) => {
   // 我们需要捕获使用命令式组件的的组件实例,我们会用它来获取上下文
   const parentInstance = getCurrentInstance();
@@ -95,7 +105,7 @@ export const createElementPlusDialog = (immediately = true) => {
       })),
       {
         provideProps: config.provideProps || {},
-        appendTo: config.appendTo,
+        appendTo: mountNode || config.appendTo,
         visible,
       }
     );

diff --git a/src/components/VantUiPopup.tsx b/src/components/VantUiPopup.tsx
@@ -7,6 +7,8 @@ import type { ICommandDialogArrtsProviderConfig } from "./Core";
 import { CommandDialogProvider } from "./Core";
 import { EVENT_NAME } from "./type";
 import { merge } from "lodash-es";
+// 引入vant Popup组件的样式
+import "vant/es/popup/style";
 
 export type IVantUiConfig = {
   // 目标ui库目标组件的插槽
@@ -18,6 +20,12 @@ export type IVantUiConfig = {
 
 } & ICommandDialogArrtsProviderConfig & Record<string, any>;
 
+// VantUiPopup全局挂载点
+let mountNode: HTMLElement | undefined = void 0
+export const setMountNode = (node: HTMLElement | undefined) => {
+  mountNode = node
+}
+
 // 默认属性
 const defaultProps: IVantUiConfig = {
   overlay: true,
@@ -78,7 +86,7 @@ export const createVantUiPopup = (immediately = true) => {
       })),
       {
         provideProps: config.provideProps || {},
-        appendTo: config.appendTo,
+        appendTo: mountNode || config.appendTo,
         visible,
       }
     );

diff --git a/src/main.ts b/src/main.ts
@@ -2,18 +2,9 @@ import { createApp } from "vue";
 import { router } from "./router";
 import App from "./App.vue";
 
-import ElementPlus from "element-plus";
-import "element-plus/dist/index.css";
-import "element-plus/theme-chalk/dark/css-vars.css";
-import Vant from "vant";
-import "vant/lib/index.css";
-
 const app = createApp(App);
 
 app.provide("main", "来自main的🩷");
 
-app.use(ElementPlus);
-app.use(Vant);
-
 app.use(router);
 app.mount("#app");
diff --git a/src/pages/example/base/compatible-native-attributes.vue b/src/pages/example/base/compatible-native-attributes.vue
@@ -1,5 +1,6 @@
 <script lang="tsx" setup>
-import { createElementPlusDialog } from "vue3-command-dialog";
+import { createElementPlusDialog } from "../../../components";
+
 import { ref, h, defineComponent } from "vue";
 const CommandDialog = createElementPlusDialog();
 

diff --git a/src/pages/example/base/components/Content.vue b/src/pages/example/base/components/Content.vue
@@ -1,8 +1,9 @@
 <script lang="tsx" setup>
-import { getCommandDialogConsumer } from "vue3-command-dialog";
-import Base from "../index.vue";
+import { getCommandDialogConsumer } from "../../../../components";
+
 import { getCurrentInstance, inject, provide, ref } from "vue";
 import { useRoute } from "vue-router";
+import Base from "../index.vue";
 
 const nested = useRoute().query.nested === "true";
 

diff --git a/src/pages/example/base/confirm.vue b/src/pages/example/base/confirm.vue
@@ -1,5 +1,5 @@
 <script lang="tsx" setup>
-import { createElementPlusDialog, getCommandDialogConsumer, EVENT_NAME } from "vue3-command-dialog";
+import { createElementPlusDialog, EVENT_NAME, getCommandDialogConsumer } from "../../../components";
 import { defineComponent } from "vue";
 
 const CommandDialog = createElementPlusDialog();

diff --git a/src/pages/example/base/index.vue b/src/pages/example/base/index.vue
@@ -1,6 +1,5 @@
 <script lang="tsx" setup>
-// 实际应该书写为:
-import { createElementPlusDialog, createVantUiPopup, createVantUiTitlePopupOnBottom } from "vue3-command-dialog";
+import { createElementPlusDialog, createVantUiPopup, createVantUiTitlePopupOnBottom } from "../../../components";
 import Content from "./components/Content.vue";
 import { provide } from "vue";
 

diff --git a/vite.config.ts b/vite.config.ts
@@ -4,6 +4,8 @@ import vue from "@vitejs/plugin-vue";
 import vueJsx from "@vitejs/plugin-vue-jsx";
 import VueRouter from "unplugin-vue-router/vite";
 import dts from "vite-plugin-dts";
+import Components from "unplugin-vue-components/vite";
+import { VantResolver, ElementPlusResolver } from "unplugin-vue-components/resolvers";
 
 export default defineConfig({
   plugins: [
@@ -13,6 +15,10 @@ export default defineConfig({
     dts({
       tsconfigPath: "./tsconfig.types.json",
     }),
+    // vant 组件自动按需引入
+    Components({
+      resolvers: [VantResolver(), ElementPlusResolver()],
+    }),
   ],
   server: {
     port: 7263,