diff --git a/apps/web-antd/src/bootstrap.ts b/apps/web-antd/src/bootstrap.ts index 30ab99888..780363c29 100644 --- 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 index 9cdb0863b..7edc070b7 100644 --- 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 index d4172b28c..9e9ac2530 100644 --- 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 index 044208555..61b7c9e59 100644 --- 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 index f3e2a17bb..8d0b42841 100644 --- 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 index f2dd83969..00f87b2ce 100644 --- 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 index d02027634..21b11c56f 100644 --- 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 = {}; + +export function setDefaultDrawerProps(props: Partial) { + 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(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 index c8d3498c3..0cdedf2f5 100644 --- 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 index 456d001b4..6cc0a30d5 100644 --- 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 = {}; + +export function setDefaultModalProps(props: Partial) { + Object.assign(DEFAULT_MODAL_PROPS, props); +} + export function useVbenModal( options: ModalApiOptions = {}, ) { @@ -68,6 +74,7 @@ export function useVbenModal( const injectData = inject(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 index ed822fdca..2a265eacd 100644 --- 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 index d82c8e5e6..7b580fd19 100644 --- 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 配置