feat: support set default props for drawer and modal (#5390)

* feat: support set default props for drawer and modal * docs: fix typo
vbenjs · Jan 14, 2025 · e1c503e · e1c503e · finalreturn · Jan 14, 2025
1 parent 5965755
commit e1c503e
Show file tree

Hide file tree

Showing 11 changed files with 82 additions and 6 deletions.
diff --git a/apps/web-antd/src/bootstrap.ts b/apps/web-antd/src/bootstrap.ts
@@ -1,7 +1,11 @@
 import { createApp, watchEffect } from 'vue';
 
 import { registerAccessDirective } from '@vben/access';
-import { initTippy } from '@vben/common-ui';
+import {
+  initTippy,
+  setDefaultDrawerProps,
+  setDefaultModalProps,
+} from '@vben/common-ui';
 import { preferences } from '@vben/preferences';
 import { initStores } from '@vben/stores';
 import '@vben/styles';
@@ -19,6 +23,16 @@ async function bootstrap(namespace: string) {
   // 初始化组件适配器
   await initComponentAdapter();
 
+  // 设置弹窗的默认配置
+  setDefaultModalProps({
+    fullscreenButton: false,
+    zIndex: 1020,
+  });
+  // 设置抽屉的默认配置
+  setDefaultDrawerProps({
+    zIndex: 1020,
+  });
+
   const app = createApp(App);
 
   // 国际化 i18n 配置

diff --git a/apps/web-ele/src/bootstrap.ts b/apps/web-ele/src/bootstrap.ts
@@ -1,7 +1,11 @@
 import { createApp, watchEffect } from 'vue';
 
 import { registerAccessDirective } from '@vben/access';
-import { initTippy } from '@vben/common-ui';
+import {
+  initTippy,
+  setDefaultDrawerProps,
+  setDefaultModalProps,
+} from '@vben/common-ui';
 import { preferences } from '@vben/preferences';
 import { initStores } from '@vben/stores';
 import '@vben/styles';
@@ -19,6 +23,15 @@ import { router } from './router';
 async function bootstrap(namespace: string) {
   // 初始化组件适配器
   await initComponentAdapter();
+  // 设置弹窗的默认配置
+  setDefaultModalProps({
+    fullscreenButton: false,
+    zIndex: 2000,
+  });
+  // 设置抽屉的默认配置
+  setDefaultDrawerProps({
+    zIndex: 2000,
+  });
   const app = createApp(App);
 
   // 注册Element Plus提供的v-loading指令

diff --git a/apps/web-naive/src/bootstrap.ts b/apps/web-naive/src/bootstrap.ts
@@ -1,7 +1,11 @@
 import { createApp, watchEffect } from 'vue';
 
 import { registerAccessDirective } from '@vben/access';
-import { initTippy } from '@vben/common-ui';
+import {
+  initTippy,
+  setDefaultDrawerProps,
+  setDefaultModalProps,
+} from '@vben/common-ui';
 import { preferences } from '@vben/preferences';
 import { initStores } from '@vben/stores';
 import '@vben/styles';
@@ -18,6 +22,17 @@ import { router } from './router';
 async function bootstrap(namespace: string) {
   // 初始化组件适配器
   initComponentAdapter();
+
+  // 设置弹窗的默认配置
+  setDefaultModalProps({
+    fullscreenButton: false,
+    zIndex: 2000,
+  });
+  // 设置抽屉的默认配置
+  setDefaultDrawerProps({
+    zIndex: 2000,
+  });
+
   const app = createApp(App);
 
   // 国际化 i18n 配置

diff --git a/docs/src/components/common-ui/vben-drawer.md b/docs/src/components/common-ui/vben-drawer.md
@@ -55,6 +55,7 @@ Drawer 内的内容一般业务中，会比较复杂，所以我们可以将 dra
 - `VbenDrawer` 组件对与参数的处理优先级是 `slot` > `props` > `state`(通过api更新的状态以及useVbenDrawer参数)。如果你已经传入了 `slot` 或者 `props`，那么 `setState` 将不会生效，这种情况下你可以通过 `slot` 或者 `props` 来更新状态。
 - 如果你使用到了 `connectedComponent` 参数，那么会存在 2 个`useVbenDrawer`, 此时，如果同时设置了相同的参数，那么以内部为准（也就是没有设置 connectedComponent 的代码）。比如 同时设置了 `onConfirm`，那么以内部的 `onConfirm` 为准。`onOpenChange`事件除外，内外都会触发。
 - 使用了`connectedComponent`参数时，可以配置`destroyOnClose`属性来决定当关闭弹窗时，是否要销毁`connectedComponent`组件（重新创建`connectedComponent`组件，这将会把其内部所有的变量、状态、数据等恢复到初始状态。）。
+- 如果抽屉的默认行为不符合你的预期，可以在`src\bootstrap.ts`中修改`setDefaultDrawerProps`的参数来设置默认的属性，如默认隐藏全屏按钮，修改默认ZIndex等。
 
 :::
 

diff --git a/docs/src/components/common-ui/vben-modal.md b/docs/src/components/common-ui/vben-modal.md
@@ -61,6 +61,7 @@ Modal 内的内容一般业务中，会比较复杂，所以我们可以将 moda
 - `VbenModal` 组件对与参数的处理优先级是 `slot` > `props` > `state`(通过api更新的状态以及useVbenModal参数)。如果你已经传入了 `slot` 或者 `props`，那么 `setState` 将不会生效，这种情况下你可以通过 `slot` 或者 `props` 来更新状态。
 - 如果你使用到了 `connectedComponent` 参数，那么会存在 2 个`useVbenModal`, 此时，如果同时设置了相同的参数，那么以内部为准（也就是没有设置 connectedComponent 的代码）。比如 同时设置了 `onConfirm`，那么以内部的 `onConfirm` 为准。`onOpenChange`事件除外，内外都会触发。
 - 使用了`connectedComponent`参数时，可以配置`destroyOnClose`属性来决定当关闭弹窗时，是否要销毁`connectedComponent`组件（重新创建`connectedComponent`组件，这将会把其内部所有的变量、状态、数据等恢复到初始状态。）。
+- 如果弹窗的默认行为不符合你的预期，可以在`src\bootstrap.ts`中修改`setDefaultModalProps`的参数来设置默认的属性，如默认隐藏全屏按钮，修改默认ZIndex等。
 
 :::
 

diff --git a/packages/@core/ui-kit/popup-ui/src/drawer/index.ts b/packages/@core/ui-kit/popup-ui/src/drawer/index.ts
@@ -1,3 +1,3 @@
 export type * from './drawer';
 export { default as VbenDrawer } from './drawer.vue';
-export { useVbenDrawer } from './use-drawer';
+export { setDefaultDrawerProps, useVbenDrawer } from './use-drawer';
diff --git a/packages/@core/ui-kit/popup-ui/src/drawer/use-drawer.ts b/packages/@core/ui-kit/popup-ui/src/drawer/use-drawer.ts
@@ -21,6 +21,12 @@ import VbenDrawer from './drawer.vue';
 
 const USER_DRAWER_INJECT_KEY = Symbol('VBEN_DRAWER_INJECT');
 
+const DEFAULT_DRAWER_PROPS: Partial<DrawerProps> = {};
+
+export function setDefaultDrawerProps(props: Partial<DrawerProps>) {
+  Object.assign(DEFAULT_DRAWER_PROPS, props);
+}
+
 export function useVbenDrawer<
   TParentDrawerProps extends DrawerProps = DrawerProps,
 >(options: DrawerApiOptions = {}) {
@@ -69,6 +75,7 @@ export function useVbenDrawer<
   const injectData = inject<any>(USER_DRAWER_INJECT_KEY, {});
 
   const mergedOptions = {
+    ...DEFAULT_DRAWER_PROPS,
     ...injectData.options,
     ...options,
   } as DrawerApiOptions;

diff --git a/packages/@core/ui-kit/popup-ui/src/modal/index.ts b/packages/@core/ui-kit/popup-ui/src/modal/index.ts
@@ -1,3 +1,3 @@
 export type * from './modal';
 export { default as VbenModal } from './modal.vue';
-export { useVbenModal } from './use-modal';
+export { setDefaultModalProps, useVbenModal } from './use-modal';
diff --git a/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts b/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts
@@ -17,6 +17,12 @@ import VbenModal from './modal.vue';
 
 const USER_MODAL_INJECT_KEY = Symbol('VBEN_MODAL_INJECT');
 
+const DEFAULT_MODAL_PROPS: Partial<ModalProps> = {};
+
+export function setDefaultModalProps(props: Partial<ModalProps>) {
+  Object.assign(DEFAULT_MODAL_PROPS, props);
+}
+
 export function useVbenModal<TParentModalProps extends ModalProps = ModalProps>(
   options: ModalApiOptions = {},
 ) {
@@ -68,6 +74,7 @@ export function useVbenModal<TParentModalProps extends ModalProps = ModalProps>(
   const injectData = inject<any>(USER_MODAL_INJECT_KEY, {});
 
   const mergedOptions = {
+    ...DEFAULT_MODAL_PROPS,
     ...injectData.options,
     ...options,
   } as ModalApiOptions;

diff --git a/packages/styles/src/antd/index.css b/packages/styles/src/antd/index.css
@@ -54,3 +54,7 @@
 .ant-app .form-valid-error .ant-picker-focused {
   box-shadow: 0 0 0 2px rgb(255 38 5 / 6%);
 }
+
+.ant-message {
+  z-index: 1050;
+}
diff --git a/playground/src/bootstrap.ts b/playground/src/bootstrap.ts
@@ -1,7 +1,11 @@
 import { createApp, watchEffect } from 'vue';
 
 import { registerAccessDirective } from '@vben/access';
-import { initTippy } from '@vben/common-ui';
+import {
+  initTippy,
+  setDefaultDrawerProps,
+  setDefaultModalProps,
+} from '@vben/common-ui';
 import { preferences } from '@vben/preferences';
 import { initStores } from '@vben/stores';
 import '@vben/styles';
@@ -20,6 +24,16 @@ async function bootstrap(namespace: string) {
   // 初始化组件适配器
   await initComponentAdapter();
 
+  // 设置弹窗的默认配置
+  setDefaultModalProps({
+    fullscreenButton: false,
+    zIndex: 1020,
+  });
+  // 设置抽屉的默认配置
+  setDefaultDrawerProps({
+    zIndex: 1020,
+  });
+
   const app = createApp(App);
 
   // 国际化 i18n 配置