From 1eafdf684bf55ee5d00d06a4184dad822869976a Mon Sep 17 00:00:00 2001 From: Liuzj <530604689@qq.com> Date: Sat, 25 Dec 2021 10:25:29 +0800 Subject: [PATCH] feat(cdk: portal): support html selectors (#656) --- packages/cdk/portal/__tests__/portal.spec.ts | 19 ++++++++++++++----- packages/cdk/portal/docs/Index.zh.md | 8 ++++---- packages/cdk/portal/src/covertTarget.ts | 10 +++++++--- .../time-panel/style/themes/default.less | 2 +- packages/components/table/docs/Index.zh.md | 2 +- .../tree-select/style/themes/default.less | 4 ++-- 6 files changed, 29 insertions(+), 16 deletions(-) diff --git a/packages/cdk/portal/__tests__/portal.spec.ts b/packages/cdk/portal/__tests__/portal.spec.ts index 5597f3bfd..230641a6b 100644 --- a/packages/cdk/portal/__tests__/portal.spec.ts +++ b/packages/cdk/portal/__tests__/portal.spec.ts @@ -40,13 +40,22 @@ describe('Portal', () => { const container1 = document.body.querySelector('.target-container1')! expect(container1.querySelector('#content')).not.toBeNull() - const container = document.createElement('div') - container.classList.add('target-container2') - document.body.appendChild(container) + const container2 = document.createElement('div') + container2.classList.add('target-container2') + document.body.appendChild(container2) - await wrapper.setProps({ target: container }) + await wrapper.setProps({ target: container2 }) expect(container1.querySelector('#content')).toBeNull() - expect(container.querySelector('#content')).not.toBeNull() + expect(container2.querySelector('#content')).not.toBeNull() + + const container3 = document.createElement('div') + container3.classList.add('target-container3') + document.body.appendChild(container3) + + await wrapper.setProps({ target: '.target-container3' }) + expect(container1.querySelector('#content')).toBeNull() + expect(container2.querySelector('#content')).toBeNull() + expect(container3.querySelector('#content')).not.toBeNull() }) test('load work', async () => { diff --git a/packages/cdk/portal/docs/Index.zh.md b/packages/cdk/portal/docs/Index.zh.md index 35c1731c5..f0c922378 100644 --- a/packages/cdk/portal/docs/Index.zh.md +++ b/packages/cdk/portal/docs/Index.zh.md @@ -12,7 +12,7 @@ cover: #### PortalProps -| 名称 | 说明 | 类型 | 默认值 | 备注 | -| ---------- | ---------------- | ----------------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `disabled` | 是否禁用传送 | `boolean` | - | 若禁用，则会以当前 `v-dom` 结构进行渲染 | -| `target` | 被传送的目标元素 | `string \| HTMLElement` | - | 如果传入一个元素，组件直接传送到该元素上；如果是一个字符串，会根据是否创建过该元素，如果创建过直接读取缓存，否则在 `body` 的最后一个元素上创建元素，并将组件传送到该元素,传入的字符串将作为组件的类名 | +| 名称 | 说明 | 类型 | 默认值 | 备注 | +| --- | --- | --- | --- | --- | +| `disabled` |

是否禁用传送

| `boolean` | - | 若禁用，则会以当前 `v-dom` 结构进行渲染 | +| `target` | 被传送的目标元素 | `string \| HTMLElement \| () => string \| HTMLElement` | - | 如果传入一个元素，组件直接传送到该元素上；
如果是一个字符串，会判断是否可以通过此字符串可以找到相应元素，若找到，则直接插入该元素下，反之会判断是否创建过该元素，若创建过直接读取缓存，否则在 `body` 的最后一个元素上创建元素，并将组件传送到该元素,传入的字符串将作为组件的类名 | diff --git a/packages/cdk/portal/src/covertTarget.ts b/packages/cdk/portal/src/covertTarget.ts index 6d693cf2f..3f888b6d2 100644 --- a/packages/cdk/portal/src/covertTarget.ts +++ b/packages/cdk/portal/src/covertTarget.ts @@ -22,9 +22,13 @@ export function covertTarget(target: PortalTargetType): HTMLElement { return targetHashmap[temp] } - const element = document.createElement('div') - element.classList.add(temp) - document.body.appendChild(element) + let element = document.querySelector(temp) + if (!element) { + element = document.createElement('div') + element.classList.add(temp) + document.body.appendChild(element) + } + targetHashmap[temp] = element return element diff --git a/packages/components/_private/time-panel/style/themes/default.less b/packages/components/_private/time-panel/style/themes/default.less index f48b1c8dd..2e9d4d3d3 100644 --- a/packages/components/_private/time-panel/style/themes/default.less +++ b/packages/components/_private/time-panel/style/themes/default.less @@ -1,4 +1,4 @@ @import '../../../../style/themes/default.less'; -@import '../../../../form/style/themes/default.less'; +@import '../../../../form/style/themes/default.variable.less'; @import '../index.less'; @import './default.variable.less'; diff --git a/packages/components/table/docs/Index.zh.md b/packages/components/table/docs/Index.zh.md index 86e746684..14df65e10 100644 --- a/packages/components/table/docs/Index.zh.md +++ b/packages/components/table/docs/Index.zh.md @@ -51,7 +51,7 @@ export type TableColumn = TableColumnBase | TableColumnExpandabl | 名称 | 说明 | 类型 | 默认值 | 全局配置 | 备注 | | --- | --- | --- | --- | --- | --- | | `additional` | 列的扩展属性 | `object` | - | - | 可以用于设置列的 `class`, `style` 或者其他属性 | -| `align` | 文本对齐方式 | `'start' \| 'right' \| 'end'` | `'start'` | ✅ | - | +| `align` | 文本对齐方式 | `'start' \| 'center' \| 'end'` | `'start'` | ✅ | - | | `colSpan` | 计算列的 `colSpan` | `(record: T, rowIndex: number) => number` | - | - | 返回为 `0` 时，不渲染, 通常用于列合并 | | `fixed` | 是否固定 | `'start' \| 'end'` | - | - | - | | `responsive` | 响应式 breakpoint 配置列表 | `BreakpointKey[]` | - | - | - | diff --git a/packages/components/tree-select/style/themes/default.less b/packages/components/tree-select/style/themes/default.less index 7468a9717..2d493bb0a 100644 --- a/packages/components/tree-select/style/themes/default.less +++ b/packages/components/tree-select/style/themes/default.less @@ -1,4 +1,4 @@ @import '../../../style/themes/default.less'; -@import '../../../form/style/themes/default.less'; -@import '../index.less'; +@import '../../../form/style/themes/default.variable.less'; @import './default.variable.less'; +@import '../index.less';