by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 在VxeTable固定列时, getPopupContainer会导致宽度不够, 弹出层样式异常 解决办法(将弹窗元素挂载到VXe滚动容器上

Browse Source
This commit is contained in:
dap
2024-11-02 15:08:18 +08:00
parent 7442c6f15b
commit 9f33320bea
22 changed files with 83 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web-antd/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "@vben/web-antd",
"version": "1.0.0-beta",
"version": "1.0.0",
"homepage": "https://vben.pro",
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
"repository": {

4
apps/web-antd/src/views/monitor/logininfor/index.vue
View File

@@ -4,7 +4,7 @@ import type { Recordable } from '@vben/types';
import { ref } from 'vue';
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
import { getPopupContainer } from '@vben/utils';
import { getVxePopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue';
import dayjs from 'dayjs';
@@ -199,7 +199,7 @@ async function handleUnlock() {
{{ $t('pages.common.info') }}
</ghost-button>
<Popconfirm
:get-popup-container="getPopupContainer"
:get-popup-container="getVxePopupContainer"
placement="left"
title="确认删除?"
@confirm="() => handleDelete(row)"

4
apps/web-antd/src/views/monitor/online/index.vue
View File

@@ -2,7 +2,7 @@
import type { Recordable } from '@vben/types';
import { Page, type VbenFormProps } from '@vben/common-ui';
import { getPopupContainer } from '@vben/utils';
import { getVxePopupContainer } from '@vben/utils';
import { Popconfirm } from 'ant-design-vue';
@@ -58,7 +58,7 @@ async function handleForceOffline(row: Recordable<any>) {
<BasicTable table-title="在线用户列表">
<template #action="{ row }">
<Popconfirm
:get-popup-container="getPopupContainer"
:get-popup-container="getVxePopupContainer"
:title="`确认强制下线[${row.userName}]?`"
placement="left"
@confirm="handleForceOffline(row)"

4
apps/web-antd/src/views/system/client/index.vue
View File

@@ -5,7 +5,7 @@ import { ref } from 'vue';
import { useAccess } from '@vben/access';
import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
import { getPopupContainer } from '@vben/utils';
import { getVxePopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue';
@@ -172,7 +172,7 @@ const { hasAccessByCodes } = useAccess();
</ghost-button>
<Popconfirm
:disabled="row.id === 1"
:get-popup-container="getPopupContainer"
:get-popup-container="getVxePopupContainer"
placement="left"
title="确认删除？"
@confirm="handleDelete(row)"

4
apps/web-antd/src/views/system/config/index.vue
View File

@@ -4,7 +4,7 @@ import type { Recordable } from '@vben/types';
import { ref } from 'vue';
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
import { getPopupContainer } from '@vben/utils';
import { getVxePopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue';
import dayjs from 'dayjs';
@@ -174,7 +174,7 @@ async function handleRefreshCache() {
{{ $t('pages.common.edit') }}
</ghost-button>
<Popconfirm
:get-popup-container="getPopupContainer"
:get-popup-container="getVxePopupContainer"
placement="left"
title="确认删除？"
@confirm="handleDelete(row)"

4
apps/web-antd/src/views/system/dept/index.vue
View File

@@ -6,7 +6,7 @@ import { nextTick } from 'vue';
import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
import {
eachTree,
getPopupContainer,
getVxePopupContainer,
listToTree,
removeEmptyChildren,
} from '@vben/utils';
@@ -166,7 +166,7 @@ function setExpandOrCollapse(expand: boolean) {
{{ $t('pages.common.add') }}
</ghost-button>
<Popconfirm
:get-popup-container="getPopupContainer"
:get-popup-container="getVxePopupContainer"
placement="left"
title="确认删除？"
@confirm="handleDelete(row)"

8
apps/web-antd/src/views/system/dict/data/index.vue
View File

@@ -4,7 +4,7 @@ import type { Recordable } from '@vben/types';
import { ref } from 'vue';
import { useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
import { getPopupContainer } from '@vben/utils';
import { getVxePopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue';
import dayjs from 'dayjs';
@@ -144,7 +144,7 @@ emitter.on('rowClick', async (value) => {
<template>
<div>
<BasicTable table-title="字典数据列表">
<BasicTable id="dict-data" table-title="字典数据列表">
<template #toolbar-tools>
<Space>
<a-button
@@ -187,7 +187,9 @@ emitter.on('rowClick', async (value) => {
{{ $t('pages.common.edit') }}
</ghost-button>
<Popconfirm
:get-popup-container="getPopupContainer"
:get-popup-container="
(node) => getVxePopupContainer(node, 'dict-data')
"
placement="left"
title="确认删除？"
@confirm="handleDelete(row)"

8
apps/web-antd/src/views/system/dict/type/index.vue
View File

@@ -5,7 +5,7 @@ import { computed, ref } from 'vue';
import { useAccess } from '@vben/access';
import { useVbenModal, type VbenFormProps } from '@vben/common-ui';
import { getPopupContainer } from '@vben/utils';
import { getVxePopupContainer } from '@vben/utils';
import {
Dropdown,
@@ -188,7 +188,7 @@ const couldSyncTenantDict = computed(() => {
<template>
<div>
<BasicTable table-title="字典类型列表">
<BasicTable id="dict-type" table-title="字典类型列表">
<template #toolbar-tools>
<Space>
<Dropdown>
@@ -243,7 +243,9 @@ const couldSyncTenantDict = computed(() => {
{{ $t('pages.common.edit') }}
</ghost-button>
<Popconfirm
:get-popup-container="getPopupContainer"
:get-popup-container="
(node) => getVxePopupContainer(node, 'dict-type')
"
placement="left"
title="确认删除？"
@confirm="handleDelete(row)"

4
apps/web-antd/src/views/system/menu/index.vue
View File

@@ -8,7 +8,7 @@ import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
import { Fallback } from '@vben/common-ui';
import {
eachTree,
getPopupContainer,
getVxePopupContainer,
listToTree,
removeEmptyChildren,
} from '@vben/utils';
@@ -174,7 +174,7 @@ const isAdmin = computed(() => {
{{ $t('pages.common.add') }}
</ghost-button>
<Popconfirm
:get-popup-container="getPopupContainer"
:get-popup-container="getVxePopupContainer"
placement="left"
title="确认删除？"
@confirm="handleDelete(row)"

4
apps/web-antd/src/views/system/notice/index.vue
View File

@@ -4,7 +4,7 @@ import type { Recordable } from '@vben/types';
import { ref } from 'vue';
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
import { getPopupContainer } from '@vben/utils';
import { getVxePopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue';
import dayjs from 'dayjs';
@@ -153,7 +153,7 @@ function handleMultiDelete() {
{{ $t('pages.common.edit') }}
</ghost-button>
<Popconfirm
:get-popup-container="getPopupContainer"
:get-popup-container="getVxePopupContainer"
placement="left"
title="确认删除？"
@confirm="handleDelete(row)"

4
apps/web-antd/src/views/system/oss-config/index.vue
View File

@@ -5,7 +5,7 @@ import { ref } from 'vue';
import { useAccess } from '@vben/access';
import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
import { getPopupContainer } from '@vben/utils';
import { getVxePopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue';
import dayjs from 'dayjs';
@@ -169,7 +169,7 @@ const { hasAccessByCodes } = useAccess();
{{ $t('pages.common.edit') }}
</ghost-button>
<Popconfirm
:get-popup-container="getPopupContainer"
:get-popup-container="getVxePopupContainer"
placement="left"
title="确认删除？"
@confirm="handleDelete(row)"

4
apps/web-antd/src/views/system/oss/index.vue
View File

@@ -6,7 +6,7 @@ import { useRouter } from 'vue-router';
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
import { $t } from '@vben/locales';
import { getPopupContainer } from '@vben/utils';
import { getVxePopupContainer } from '@vben/utils';
import {
Image,
@@ -219,7 +219,7 @@ const [FileUploadModal, fileUploadApi] = useVbenModal({
{{ $t('pages.common.download') }}
</ghost-button>
<Popconfirm
:get-popup-container="getPopupContainer"
:get-popup-container="getVxePopupContainer"
placement="left"
title="确认删除？"
@confirm="handleDelete(row)"

4
apps/web-antd/src/views/system/post/index.vue
View File

@@ -4,7 +4,7 @@ import type { Recordable } from '@vben/types';
import { ref } from 'vue';
import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
import { getPopupContainer } from '@vben/utils';
import { getVxePopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue';
import dayjs from 'dayjs';
@@ -187,7 +187,7 @@ function handleMultiDelete() {
{{ $t('pages.common.edit') }}
</GhostButton>
<Popconfirm
:get-popup-container="getPopupContainer"
:get-popup-container="getVxePopupContainer"
placement="left"
title="确认删除？"
@confirm="handleDelete(row)"

4
apps/web-antd/src/views/system/role-assign/index.vue
View File

@@ -5,7 +5,7 @@ import { nextTick, ref } from 'vue';
import { useRoute } from 'vue-router';
import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
import { getPopupContainer } from '@vben/utils';
import { getVxePopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue';
@@ -157,7 +157,7 @@ function handleMultipleAuthCancel() {
</template>
<template #action="{ row }">
<Popconfirm
:get-popup-container="getPopupContainer"
:get-popup-container="getVxePopupContainer"
:title="`是否取消授权用户[${row.userName} - ${row.nickName}]?`"
placement="left"
@confirm="handleAuthCancel(row)"

6
apps/web-antd/src/views/system/role/index.vue
View File

@@ -11,7 +11,7 @@ import {
useVbenModal,
type VbenFormProps,
} from '@vben/common-ui';
import { getPopupContainer } from '@vben/utils';
import { getVxePopupContainer } from '@vben/utils';
import {
Dropdown,
@@ -222,7 +222,7 @@ function handleAssignRole(record: Recordable<any>) {
{{ $t('pages.common.edit') }}
</ghost-button>
<Popconfirm
:get-popup-container="getPopupContainer"
:get-popup-container="getVxePopupContainer"
placement="left"
title="确认删除？"
@confirm="handleDelete(row)"
@@ -237,7 +237,7 @@ function handleAssignRole(record: Recordable<any>) {
</Popconfirm>
</Space>
<Dropdown
:get-popup-container="getPopupContainer"
:get-popup-container="getVxePopupContainer"
placement="bottomRight"
>
<template #overlay>

6
apps/web-antd/src/views/system/tenant/index.vue
View File

@@ -6,7 +6,7 @@ import { computed, ref } from 'vue';
import { useAccess } from '@vben/access';
import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
import { Fallback } from '@vben/common-ui';
import { getPopupContainer } from '@vben/utils';
import { getVxePopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue';
import dayjs from 'dayjs';
@@ -205,7 +205,7 @@ const isSuperAdmin = computed(() => {
{{ $t('pages.common.edit') }}
</ghost-button>
<Popconfirm
:get-popup-container="getPopupContainer"
:get-popup-container="getVxePopupContainer"
:title="`确认同步[${row.companyName}]的套餐吗?`"
placement="left"
@confirm="handleSync(row)"
@@ -218,7 +218,7 @@ const isSuperAdmin = computed(() => {
</ghost-button>
</Popconfirm>
<Popconfirm
:get-popup-container="getPopupContainer"
:get-popup-container="getVxePopupContainer"
placement="left"
title="确认删除？"
@confirm="handleDelete(row)"

4
apps/web-antd/src/views/system/tenantPackage/index.vue
View File

@@ -6,7 +6,7 @@ import { computed, ref } from 'vue';
import { useAccess } from '@vben/access';
import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
import { Fallback } from '@vben/common-ui';
import { getPopupContainer } from '@vben/utils';
import { getVxePopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue';
import dayjs from 'dayjs';
@@ -192,7 +192,7 @@ const isSuperAdmin = computed(() => {
{{ $t('pages.common.edit') }}
</ghost-button>
<Popconfirm
:get-popup-container="getPopupContainer"
:get-popup-container="getVxePopupContainer"
placement="left"
title="确认删除？"
@confirm="handleDelete(row)"

6
apps/web-antd/src/views/system/user/index.vue
View File

@@ -12,7 +12,7 @@ import {
} from '@vben/common-ui';
import { $t } from '@vben/locales';
import { preferences } from '@vben/preferences';
import { getPopupContainer } from '@vben/utils';
import { getVxePopupContainer } from '@vben/utils';
import {
Avatar,
@@ -266,7 +266,7 @@ const { hasAccessByCodes } = useAccess();
{{ $t('pages.common.edit') }}
</ghost-button>
<Popconfirm
:get-popup-container="getPopupContainer"
:get-popup-container="getVxePopupContainer"
placement="left"
title="确认删除？"
@confirm="handleDelete(row)"
@@ -281,7 +281,7 @@ const { hasAccessByCodes } = useAccess();
</Popconfirm>
</Space>
<Dropdown
:get-popup-container="getPopupContainer"
:get-popup-container="getVxePopupContainer"
placement="bottomRight"
>
<template #overlay>

3
apps/web-antd/src/views/tool/gen/index.vue
View File

@@ -5,6 +5,7 @@ import { nextTick, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
import { getVxePopupContainer } from '@vben/utils';
import { message, Modal, Popconfirm, Space } from 'ant-design-vue';
import dayjs from 'dayjs';
@@ -263,6 +264,7 @@ function handleImport() {
{{ $t('pages.common.edit') }}
</a-button>
<Popconfirm
:get-popup-container="getVxePopupContainer"
:title="`确认同步[${row.tableName}]?`"
placement="left"
@confirm="handleSync(row)"
@@ -285,6 +287,7 @@ function handleImport() {
生成代码
</a-button>
<Popconfirm
:get-popup-container="getVxePopupContainer"
:title="`确认删除[${row.tableName}]?`"
placement="left"
@confirm="handleDelete(row)"

4
apps/web-antd/src/views/workflow/category/index.vue
View File

@@ -4,7 +4,7 @@ import type { Recordable } from '@vben/types';
import { nextTick } from 'vue';
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
import { getPopupContainer, listToTree } from '@vben/utils';
import { getVxePopupContainer, listToTree } from '@vben/utils';
import { Popconfirm, Space } from 'ant-design-vue';
@@ -130,7 +130,7 @@ function collapseAll() {
{{ $t('pages.common.add') }}
</ghost-button>
<Popconfirm
:get-popup-container="getPopupContainer"
:get-popup-container="getVxePopupContainer"
placement="left"
title="确认删除？"
@confirm="handleDelete(row)"