fix(image-viewer): 移除额外的根元素 (#1598)

* fix(image-viewer): 移除额外的根元素 * fix(imageviewer): 单元测试ts检测异常
Tencent · Oct 10, 2022 · 598b417 · 598b417
1 parent 0f0910e
commit 598b417
Show file tree

Hide file tree

Showing 6 changed files with 200 additions and 172 deletions.
diff --git a/src/form/__tests__/__snapshots__/demo.test.js.snap b/src/form/__tests__/__snapshots__/demo.test.js.snap
@@ -2061,29 +2061,24 @@ exports[`Form Form disabledVue demo works fine 1`] = `
                         <span
                           class="t-upload__card-mask-item"
                         >
-                          <div
-                            class="t-image-viewer"
-                            style="display: inline-block;"
+                          <svg
+                            class="t-icon t-icon-browse"
+                            fill="none"
+                            height="1em"
+                            viewBox="0 0 16 16"
+                            width="1em"
                           >
-                            <svg
-                              class="t-icon t-icon-browse"
-                              fill="none"
-                              height="1em"
-                              viewBox="0 0 16 16"
-                              width="1em"
-                            >
-                              <path
-                                d="M10.88 8a2.88 2.88 0 11-5.76 0 2.88 2.88 0 015.76 0zm-1 0a1.88 1.88 0 10-3.76 0 1.88 1.88 0 003.76 0z"
-                                fill="currentColor"
-                                fill-opacity="0.9"
-                              />
-                              <path
-                                d="M1.12 8.23A7.72 7.72 0 008 12.5c2.9 0 5.54-1.63 6.88-4.27L15 8l-.12-.23A7.73 7.73 0 008 3.5a7.74 7.74 0 00-6.88 4.27L1 8l.12.23zM8 11.5A6.73 6.73 0 012.11 8 6.73 6.73 0 0113.9 8 6.74 6.74 0 018 11.5z"
-                                fill="currentColor"
-                                fill-opacity="0.9"
-                              />
-                            </svg>
-                          </div>
+                            <path
+                              d="M10.88 8a2.88 2.88 0 11-5.76 0 2.88 2.88 0 015.76 0zm-1 0a1.88 1.88 0 10-3.76 0 1.88 1.88 0 003.76 0z"
+                              fill="currentColor"
+                              fill-opacity="0.9"
+                            />
+                            <path
+                              d="M1.12 8.23A7.72 7.72 0 008 12.5c2.9 0 5.54-1.63 6.88-4.27L15 8l-.12-.23A7.73 7.73 0 008 3.5a7.74 7.74 0 00-6.88 4.27L1 8l.12.23zM8 11.5A6.73 6.73 0 012.11 8 6.73 6.73 0 0113.9 8 6.74 6.74 0 018 11.5z"
+                              fill="currentColor"
+                              fill-opacity="0.9"
+                            />
+                          </svg>
                         </span>
                         <span
                           class="t-upload__card-mask-item-divider"

diff --git a/src/image-viewer/base/Container.tsx b/src/image-viewer/base/Container.tsx
@@ -0,0 +1,59 @@
+import Vue from 'vue';
+
+import props from '../props';
+import { TdImageViewerProps } from '../type';
+import { getAttach, removeDom } from '../../utils/dom';
+
+// eslint-disable-next-line no-spaced-func
+export default Vue.extend<
+  { content: Vue },
+  // eslint-disable-next-line func-call-spacing
+  { mountContent: () => void; unmountContent: () => void },
+  Record<string, any>,
+  Readonly<{ mode: TdImageViewerProps['mode']; renderModal: Function; renderViewer: Function }>
+    >({
+      props: {
+        mode: props.mode,
+        renderModal: Function,
+        renderViewer: Function,
+      },
+      data() {
+        return {
+          content: null as Vue,
+        };
+      },
+      methods: {
+        mountContent() {
+          if (this.content) return;
+          // eslint-disable-next-line @typescript-eslint/no-this-alias
+          const _this = this;
+
+          const elm = document.createElement('div');
+          elm.style.cssText = 'position: absolute; top: 0px; left: 0px; width: 100%';
+          this.content = new (this.$root.constructor as any)({
+            render() {
+              return _this.mode === 'modeless' ? _this.renderModal() : _this.renderViewer();
+            },
+            destroyed() {
+              if (_this.content.$el) {
+                removeDom(_this.content.$el as HTMLElement);
+              }
+              _this.content = null;
+            },
+          });
+
+          getAttach(document.body).appendChild(elm);
+          this.content.$mount(elm);
+        },
+        unmountContent() {
+          this.content?.$destroy?.();
+        },
+      },
+      render() {
+        const children = this.$slots.default || [];
+        if (children.length > 1 || !children[0]?.tag) {
+          return <span>{children}</span>;
+        }
+        return children[0];
+      },
+    });
diff --git a/src/image-viewer/base/ImageViewerModal.tsx b/src/image-viewer/base/ImageViewerModal.tsx
@@ -63,7 +63,6 @@ export default defineComponent({
     return (
       <TDialog
         destroyOnClose
-        attach="body"
         onClose={this.closeHandler}
         visible={this.visible}
         placement="center"

diff --git a/src/image-viewer/image-viewer.tsx b/src/image-viewer/image-viewer.tsx
@@ -4,14 +4,14 @@ import {
 import { ChevronLeftIcon, ChevronDownIcon, CloseIcon } from 'tdesign-icons-vue';
 
 import props from './props';
+import Container from './base/Container';
 import TImageViewerIcon from './base/ImageModalIcon';
 import TImageViewerUtils from './base/ImageViewerUtils';
 import TImageItem from './base/ImageItem';
 import TImageViewerModal from './base/ImageViewerModal';
 import useVModel from '../hooks/useVModel';
 import useDefaultValue from '../hooks/useDefaultValue';
 import { usePrefixClass } from '../hooks/useConfig';
-import TransferDom from '../utils/transfer-dom';
 import { renderTNodeJSX } from '../utils/render-tnode';
 
 import { TdImageViewerProps } from './type';
@@ -22,9 +22,6 @@ import { EVENT_CODE } from './const';
 export default defineComponent({
   name: 'TImageViewer',
   props: { ...props },
-  directives: {
-    TransferDom,
-  },
   model: {
     prop: 'visible',
     event: 'change',
@@ -131,14 +128,28 @@ export default defineComponent({
       }
     };
 
+    const containerRef = ref();
+    const mountContent = () => {
+      if (containerRef) {
+        containerRef.value.mountContent();
+      }
+    };
+    const unmountContent = () => {
+      if (containerRef) {
+        containerRef.value.unmountContent();
+      }
+    };
+
     watch(
       () => visibleValue.value,
       (val) => {
         if (val) {
           window.addEventListener('keydown', keydownHandler);
+          mountContent();
           return;
         }
         window.removeEventListener('keydown', keydownHandler);
+        unmountContent();
       },
     );
 
@@ -186,6 +197,7 @@ export default defineComponent({
       closeBtnAction,
       scale,
       isMultipleImg,
+      containerRef,
     };
   },
   methods: {
@@ -194,7 +206,7 @@ export default defineComponent({
         <div class={this.headerClass}>
           <TImageViewerIcon
             icon={() => <ChevronDownIcon size="20px" />}
-            class={`${this.COMPONENT_NAME}__header-pre__bt`}
+            class={`${this.COMPONENT_NAME}__header-pre-bt`}
             clickHandler={this.toggleExpand}
           />
           <div class={`${this.COMPONENT_NAME}__header-prev`}>
@@ -240,77 +252,76 @@ export default defineComponent({
         />
       );
     },
-  },
-  render() {
-    if (this.mode === 'modeless') {
+    renderModal() {
       return (
-        <div class={this.rootClass} style={{ display: 'inline-block' }}>
-          {renderTNodeJSX(this, 'trigger', { params: { open: this.openHandler } })}
-          <TImageViewerModal
-            zIndex={this.zIndexValue}
-            visible={this.visibleValue}
-            index={this.indexValue}
-            images={this.imagesList}
-            scale={this.scale}
-            rotate={this.rotate}
-            mirror={this.mirror}
-            currentImage={this.currentImage}
-            rotateHandler={this.onRotate}
+        <TImageViewerModal
+          zIndex={this.zIndexValue}
+          visible={this.visibleValue}
+          index={this.indexValue}
+          images={this.imagesList}
+          scale={this.scale}
+          rotate={this.rotate}
+          mirror={this.mirror}
+          currentImage={this.currentImage}
+          rotateHandler={this.onRotate}
+          zoomInHandler={this.onZoomIn}
+          zoomOutHandler={this.onZoomOut}
+          mirrorHandler={this.onMirror}
+          resetHandler={this.onRest}
+          closeHandler={this.onCloseHandle}
+          draggable={this.draggable}
+          showOverlay={this.showOverlayValue}
+          closeBtn={this.closeBtn}
+        />
+      );
+    },
+    renderViewer() {
+      return (
+        <div class={this.wrapClass} style={{ zIndex: this.zIndexValue }} onWheel={this.onWheel}>
+          {!!this.showOverlayValue && (
+            <div class={`${this.COMPONENT_NAME}__modal-mask`} onClick={this.clickOverlayHandler} />
+          )}
+          {this.isMultipleImg && this.renderHeader()}
+          {this.isMultipleImg && this.renderNavigationArrow('prev')}
+          {this.isMultipleImg && this.renderNavigationArrow('next')}
+          {this.isMultipleImg && (
+            <div class={`${this.COMPONENT_NAME}__modal-index`}>
+              {renderTNodeJSX(this, 'title')}
+              {`${this.indexValue + 1}/${this.imagesList.length}`}
+            </div>
+          )}
+          <div
+            class={[`${this.COMPONENT_NAME}__modal-icon`, `${this.COMPONENT_NAME}__modal-close-bt`]}
+            onClick={this.closeBtnAction}
+          >
+            {renderTNodeJSX(this, 'closeBtn', <CloseIcon size="24px" />)}
+          </div>
+          <TImageViewerUtils
             zoomInHandler={this.onZoomIn}
             zoomOutHandler={this.onZoomOut}
             mirrorHandler={this.onMirror}
             resetHandler={this.onRest}
-            closeHandler={this.onCloseHandle}
-            draggable={this.draggable}
-            showOverlay={this.showOverlayValue}
-            closeBtn={this.closeBtn}
+            rotateHandler={this.onRotate}
+            scale={this.scale}
+            currentImage={this.currentImage}
+          />
+          <TImageItem
+            scale={this.scale}
+            rotate={this.rotate}
+            mirror={this.mirror}
+            src={this.currentImage.mainImage}
+            placementSrc={this.currentImage.thumbnail}
           />
         </div>
       );
-    }
+    },
+  },
 
+  render() {
     return (
-      <div class={this.rootClass} style={{ display: 'inline-block' }}>
+      <Container ref="containerRef" mode={this.mode} renderModal={this.renderModal} renderViewer={this.renderViewer}>
         {renderTNodeJSX(this, 'trigger', { params: { open: this.openHandler } })}
-        {this.visibleValue && (
-          <div class={this.wrapClass} v-transfer-dom="body" style={{ zIndex: this.zIndexValue }} onWheel={this.onWheel}>
-            {!!this.showOverlayValue && (
-              <div class={`${this.COMPONENT_NAME}__modal-mask`} onClick={this.clickOverlayHandler} />
-            )}
-            {this.isMultipleImg && this.renderHeader()}
-            {this.isMultipleImg && this.renderNavigationArrow('prev')}
-            {this.isMultipleImg && this.renderNavigationArrow('next')}
-            {this.isMultipleImg && (
-              <div class={`${this.COMPONENT_NAME}__modal-index`}>
-                {renderTNodeJSX(this, 'title')}
-                {`${this.indexValue + 1}/${this.imagesList.length}`}
-              </div>
-            )}
-            <div
-              class={[`${this.COMPONENT_NAME}__modal-icon`, `${this.COMPONENT_NAME}__modal-close-bt`]}
-              onClick={this.closeBtnAction}
-            >
-              {renderTNodeJSX(this, 'closeBtn', <CloseIcon size="24px" />)}
-            </div>
-            <TImageViewerUtils
-              zoomInHandler={this.onZoomIn}
-              zoomOutHandler={this.onZoomOut}
-              mirrorHandler={this.onMirror}
-              resetHandler={this.onRest}
-              rotateHandler={this.onRotate}
-              scale={this.scale}
-              currentImage={this.currentImage}
-            />
-            <TImageItem
-              scale={this.scale}
-              rotate={this.rotate}
-              mirror={this.mirror}
-              src={this.currentImage.mainImage}
-              placementSrc={this.currentImage.thumbnail}
-            />
-          </div>
-        )}
-      </div>
+      </Container>
     );
   },
 });
diff --git a/src/upload/__tests__/__snapshots__/demo.test.js.snap b/src/upload/__tests__/__snapshots__/demo.test.js.snap
@@ -1021,29 +1021,24 @@ exports[`Upload Upload imageVue demo works fine 1`] = `
                 <span
                   class="t-upload__card-mask-item"
                 >
-                  <div
-                    class="t-image-viewer"
-                    style="display: inline-block;"
+                  <svg
+                    class="t-icon t-icon-browse"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    width="1em"
                   >
-                    <svg
-                      class="t-icon t-icon-browse"
-                      fill="none"
-                      height="1em"
-                      viewBox="0 0 16 16"
-                      width="1em"
-                    >
-                      <path
-                        d="M10.88 8a2.88 2.88 0 11-5.76 0 2.88 2.88 0 015.76 0zm-1 0a1.88 1.88 0 10-3.76 0 1.88 1.88 0 003.76 0z"
-                        fill="currentColor"
-                        fill-opacity="0.9"
-                      />
-                      <path
-                        d="M1.12 8.23A7.72 7.72 0 008 12.5c2.9 0 5.54-1.63 6.88-4.27L15 8l-.12-.23A7.73 7.73 0 008 3.5a7.74 7.74 0 00-6.88 4.27L1 8l.12.23zM8 11.5A6.73 6.73 0 012.11 8 6.73 6.73 0 0113.9 8 6.74 6.74 0 018 11.5z"
-                        fill="currentColor"
-                        fill-opacity="0.9"
-                      />
-                    </svg>
-                  </div>
+                    <path
+                      d="M10.88 8a2.88 2.88 0 11-5.76 0 2.88 2.88 0 015.76 0zm-1 0a1.88 1.88 0 10-3.76 0 1.88 1.88 0 003.76 0z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                    <path
+                      d="M1.12 8.23A7.72 7.72 0 008 12.5c2.9 0 5.54-1.63 6.88-4.27L15 8l-.12-.23A7.73 7.73 0 008 3.5a7.74 7.74 0 00-6.88 4.27L1 8l.12.23zM8 11.5A6.73 6.73 0 012.11 8 6.73 6.73 0 0113.9 8 6.74 6.74 0 018 11.5z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                  </svg>
                 </span>
                 <span
                   class="t-upload__card-mask-item-divider"