bugfix(popover): 收起面板后dom元素需要保留 TencentBlueKing#2230

jinquantianxia · Dec 25, 2024 · 18e34fe · 18e34fe
1 parent 5088976
commit 18e34fe
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 13 deletions.
diff --git a/packages/popover/src/popover.tsx b/packages/popover/src/popover.tsx
@@ -106,15 +106,8 @@ export default defineComponent({
     onMounted(onMountedFn);
     onBeforeUnmount(onUnmountedFn);
 
-    const transBoundary = computed(() => localIsShow.value && !props.disableTeleport);
-    const show = () => {
-      showFn();
-    };
-
-    const hide = () => {
-      hideFn();
-    };
-
+    const isRenderModeShow = computed(() => props.renderDirective === 'show');
+    const transBoundary = computed(() => isRenderModeShow.value || (localIsShow.value && !props.disableTeleport));
     const contentIsShow = computed(() => {
       if (props.renderType === RenderType.AUTO) {
         return true;
@@ -123,7 +116,15 @@ export default defineComponent({
       return localIsShow.value;
     });
 
-    // 点击 content 收起面板，dropdown 那边需要
+    const show = () => {
+      showFn();
+    };
+
+    const hide = () => {
+      hideFn();
+    };
+
+    // 点击 content 收起面板
     const handleClickContent = () => {
       if (props.trigger !== 'manual' && !props.always && props.clickContentAutoHide) {
         localIsShow.value = false;
@@ -147,6 +148,7 @@ export default defineComponent({
       refArrow,
       content: props.content,
       theme: props.theme,
+      isRenderModeShow,
       transBoundary,
       handleClickContent,
       handleClickOutside,
@@ -190,7 +192,7 @@ export default defineComponent({
             visible={this.localIsShow}
             onClick={this.handleClickContent}
           >
-            {this.contentIsShow ? this.$slots.content?.() ?? this.renderContent() : ''}
+            {this.isRenderModeShow || this.contentIsShow ? this.$slots.content?.() ?? this.renderContent() : ''}
           </Content>
         </Teleport>
       </Root>

diff --git a/packages/popover/src/props.ts b/packages/popover/src/props.ts
@@ -26,7 +26,14 @@
 import { ExtractPropTypes } from 'vue';
 import { toType } from 'vue-types';
 
-import { PlacementEnum, placementType, PropTypes, renderType, triggerType } from '@bkui-vue/shared';
+import {
+  PlacementEnum,
+  placementType,
+  PropTypes,
+  renderType,
+  triggerType,
+  renderDirectiveType,
+} from '@bkui-vue/shared';
 
 export const EventProps = {
   onAfterHidden: () => {},
@@ -44,13 +51,13 @@ export const PopoverProps = {
   isShow: PropTypes.bool.def(false),
   always: PropTypes.bool.def(false),
   disabled: PropTypes.bool.def(false),
-  // 非 manual 模式，点击 content 自动隐藏面板
   clickContentAutoHide: PropTypes.bool.def(false),
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).def('auto'),
   height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).def('auto'),
   maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).def('auto'),
   maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).def('auto'),
   content: toType<IContent>('IContent', {}).def(''),
+  renderDirective: renderDirectiveType().def('if'),
 
   target: PropTypes.oneOfType([
     PropTypes.string,

diff --git a/site/views/popover/index.tsx b/site/views/popover/index.tsx
@@ -243,6 +243,20 @@ const props: IPropsTableItem[] = [
     * 如果设置为0，则不启用此设置`,
     optional: [],
   },
+  {
+    name: 'clickContentAutoHide',
+    type: 'Boolean',
+    default: 'false',
+    desc: '非 manual 模式，点击 content 自动隐藏面板',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'renderDirective',
+    type: 'String',
+    default: 'if',
+    desc: '渲染方式，值为 show 时，气泡内容 dom 元素不会销毁',
+    optional: ['if', 'show'],
+  },
 ];
 
 const events: IPropsTableItem[] = [