diff --git a/packages/utils/src/event/index.ts b/packages/utils/src/event/index.ts index 76d9e731f7..67f3495314 100644 --- a/packages/utils/src/event/index.ts +++ b/packages/utils/src/event/index.ts @@ -58,7 +58,7 @@ export const getActualTarget = (e) => { if (!e || !e.target) { return null } - return e.target.shadowRoot && e.composed ? e.composedPath()[0] || e.target : e.target + return e.target?.shadowRoot && e.composed ? e.composedPath()[0] || e.target : e.target } export const correctTarget = (event, target?: EventTarget) => { diff --git a/packages/vue/src/grid/package.json b/packages/vue/src/grid/package.json index f600c8fd4a..e1ef3ec8a0 100644 --- a/packages/vue/src/grid/package.json +++ b/packages/vue/src/grid/package.json @@ -1,7 +1,7 @@ { "name": "@opentiny/vue-grid", "type": "module", - "version": "3.25.0", + "version": "3.25.1", "description": "", "license": "MIT", "sideEffects": false, @@ -12,6 +12,7 @@ "//postversion": "pnpm build" }, "dependencies": { + "@opentiny/utils": "workspace:~", "@opentiny/vue-common": "workspace:~", "@opentiny/vue-directive": "workspace:~", "@opentiny/vue-dropdown": "workspace:~", @@ -26,8 +27,7 @@ "@opentiny/vue-renderless": "workspace:~", "@opentiny/vue-tag": "workspace:~", "@opentiny/vue-theme": "workspace:~", - "@opentiny/vue-tooltip": "workspace:~", - "@opentiny/utils": "workspace:~" + "@opentiny/vue-tooltip": "workspace:~" }, "devDependencies": { "@opentiny-internal/vue-test-utils": "workspace:*", diff --git a/packages/vue/src/grid/src/keyboard/src/methods.ts b/packages/vue/src/grid/src/keyboard/src/methods.ts index a428f6e7a7..5a7171db33 100644 --- a/packages/vue/src/grid/src/keyboard/src/methods.ts +++ b/packages/vue/src/grid/src/keyboard/src/methods.ts @@ -22,7 +22,7 @@ * SOFTWARE. * */ -import { addClass, removeClass } from '@opentiny/utils' +import { addClass, removeClass, getActualTarget } from '@opentiny/utils' import { arrayEach, arrayIndexOf, findTree, find } from '@opentiny/vue-renderless/grid/static/' import { getCellValue, setCellValue, getCell, getRowNodes, getCellNodeIndex } from '@opentiny/vue-renderless/grid/utils' import { extend } from '@opentiny/utils' @@ -667,12 +667,13 @@ export default { const { $grid, $refs, autoClearMouseChecked, autoClearKeyboardCopy } = this const { tableWrapper, tooltip, validTip } = $refs const equalOrContain = (elm, target) => elm && (elm === target || elm.contains(target)) + const actualTarget = getActualTarget(event) if ( - !equalOrContain($grid.$el, event.target) && - !equalOrContain(tableWrapper, event.target) && - !equalOrContain(tooltip && tooltip.state.popperElm, event.target) && - !equalOrContain(validTip && validTip.state.popperElm, event.target) + !equalOrContain($grid.$el, actualTarget) && + !equalOrContain(tableWrapper, actualTarget) && + !equalOrContain(tooltip && tooltip.state.popperElm, actualTarget) && + !equalOrContain(validTip && validTip.state.popperElm, actualTarget) ) { if (autoClearMouseChecked) { this.clearChecked() diff --git a/packages/vue/src/grid/src/table/src/methods.ts b/packages/vue/src/grid/src/table/src/methods.ts index d3239229c4..79d560724a 100644 --- a/packages/vue/src/grid/src/table/src/methods.ts +++ b/packages/vue/src/grid/src/table/src/methods.ts @@ -23,7 +23,7 @@ * */ import { getColumnList, assemColumn, repairFixed } from '@opentiny/vue-renderless/grid/utils' -import { toDecimal } from '@opentiny/utils' +import { toDecimal, getActualTarget } from '@opentiny/utils' import { addClass, removeClass } from '@opentiny/utils' import { isNull } from '@opentiny/utils' import { debounce } from '@opentiny/utils' @@ -1213,7 +1213,7 @@ const Methods = { blurClass = blurClassConfig.slice(0) } - if (args?.cell.contains(event.target)) { + if (args?.cell.contains(getActualTarget(event))) { return true } if (editConfig.mode === 'row' && getEventTargetNode(event, $el, 'tiny-grid-body__column').flag) { @@ -1625,7 +1625,7 @@ const Methods = { const { scrollHeight, bodyHeight } = this.scrollLoadStore const { currentPage, pageSize } = this.$grid.tablePage const max = scrollHeight - bodyHeight - let scrollTop = event.target.scrollTop + let scrollTop = getActualTarget(event).scrollTop if (scrollTop > max) { scrollTop = max @@ -1649,7 +1649,7 @@ const Methods = { const { startIndex, renderSize, offsetSize, visibleIndex, visibleSize, rowHeight } = scrollYStore // 动态获取容器的scrollTop,这里有可能会造成卡顿,暂时没有好的方案 - let { scrollTop } = event.target + let { scrollTop } = getActualTarget(event) let toVisibleIndex = Math.ceil(scrollTop / rowHeight) let preload = false if (visibleIndex === toVisibleIndex) { @@ -1748,7 +1748,7 @@ const Methods = { updateScrollLoadBar(event) { const { $el, elemStore, scrollLoad, scrollLoadStore } = this - if (scrollLoad && $el.contains(event.target)) { + if (scrollLoad && $el.contains(getActualTarget(event))) { const wheelDelta = event.wheelDelta ? event.wheelDelta : -event.detail * 40 const scrollElm = elemStore['main-body-ySpace'] const { scrollHeight, bodyHeight } = scrollLoadStore diff --git a/packages/vue/src/grid/src/table/src/utils/handleGlobalMousedownEvent.ts b/packages/vue/src/grid/src/table/src/utils/handleGlobalMousedownEvent.ts index 0e7ef17463..30c7190107 100644 --- a/packages/vue/src/grid/src/table/src/utils/handleGlobalMousedownEvent.ts +++ b/packages/vue/src/grid/src/table/src/utils/handleGlobalMousedownEvent.ts @@ -22,6 +22,8 @@ * SOFTWARE. * */ +import { getActualTarget } from '@opentiny/utils' + export function handleGlobalMousedownOnFilterWrapper({ $el, _vm, event, filterStore, filterWrapper }) { if (filterWrapper) { if (_vm.getEventTargetNode(event, $el, 'tiny-grid-filter-wrapper').flag) { @@ -77,12 +79,13 @@ export function handleGlobalIsClear({ $el, _vm, actived, editConfig, event, isCl export function handleGlobalClearActived({ $el, _vm, event, isClear }) { const tableContent = _vm.$refs.tableBody?.$refs.table + const actualTarget = getActualTarget(event) // 如果点击了当前表格之外 if ( isClear || !_vm.getEventTargetNode(event, $el).flag || - (_vm.$refs.tableHeader && _vm.$refs.tableHeader.$el.contains(event.target)) || - (tableContent && !tableContent.contains(event.target)) + (_vm.$refs.tableHeader && _vm.$refs.tableHeader.$el.contains(actualTarget)) || + (tableContent && !tableContent.contains(actualTarget)) ) { setTimeout(() => _vm.clearActived(event)) }