fix(tooltip): support fragment when using wrapper

vexip-ui · Jul 15, 2022 · 68be420 · 68be420
1 parent e44f327
commit 68be420
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 24 deletions.
diff --git a/components/tooltip/tooltip.tsx b/components/tooltip/tooltip.tsx
@@ -131,12 +131,12 @@ export default defineComponent({
       return reference.value instanceof Element ? reference.value : null
     })
 
-    const wrapper = useClickOutside(handleClickOutside)
+    useClickOutside(handleClickOutside, originalTrigger)
     const { popper, transferTo, updatePopper } = usePopper({
       placement,
       transfer,
-      wrapper,
-      reference
+      reference,
+      wrapper: originalTrigger
     })
 
     const tipStyle = computed(() => {
@@ -271,10 +271,6 @@ export default defineComponent({
       } else {
         originalTrigger.value = null
       }
-
-      if (!props.wrapper) {
-        wrapper.value = originalTrigger.value
-      }
     }
 
     function syncRendering() {
@@ -285,7 +281,8 @@ export default defineComponent({
       const CustomTag = props.wrapper
         ? ((props.wrapper === true ? 'span' : props.wrapper) as any)
         : null
-      const triggerVNode = slots.trigger?.()[0] || null
+      const triggers = slots.trigger?.()
+      const triggerVNode = triggers ? triggers[0] : null
 
       const stopPropagation = (event: MouseEvent) => {
         event.stopPropagation()
@@ -303,8 +300,18 @@ export default defineComponent({
 
         return triggerVNode
       }
-      const renderPopover = () => [
-        triggerVNode && <Fragment ref={syncTriggerRef as any}>{renderTrigger()}</Fragment>,
+
+      return [
+        triggerVNode &&
+          (CustomTag
+            ? (
+            <CustomTag {...attrs} ref={originalTrigger} class={[nh.b(), nh.bs('vars')]}>
+              {triggers}
+            </CustomTag>
+              )
+            : (
+            <Fragment ref={syncTriggerRef as any}>{renderTrigger()}</Fragment>
+              )),
         !props.disabled && (
           <Portal to={transferTo.value}>
             {(props.tipAlive || rendering.value) && (
@@ -337,16 +344,6 @@ export default defineComponent({
           </Portal>
         )
       ]
-
-      return CustomTag
-        ? (
-        <CustomTag ref={wrapper} {...attrs} class={[nh.b(), nh.bs('vars')]}>
-          {renderPopover()}
-        </CustomTag>
-          )
-        : (
-            renderPopover()
-          )
     }
   }
 })
diff --git a/docs/demos/tooltip/trigger/demo.en-US.vue b/docs/demos/tooltip/trigger/demo.en-US.vue
@@ -12,7 +12,7 @@
       </template>
       Some tip content
     </Tooltip>
-    <Tooltip trigger="focus" placement="right">
+    <Tooltip trigger="focus" placement="bottom">
       <template #trigger>
         <Button> Focus Trigger </Button>
       </template>

diff --git a/docs/demos/tooltip/trigger/demo.zh-CN.vue b/docs/demos/tooltip/trigger/demo.zh-CN.vue
@@ -12,7 +12,7 @@
       </template>
       一些提示的内容
     </Tooltip>
-    <Tooltip trigger="focus" placement="right">
+    <Tooltip trigger="focus" placement="bottom">
       <template #trigger>
         <Button> 聚焦触发 </Button>
       </template>

diff --git a/docs/demos/tooltip/wrapper/demo.en-US.vue b/docs/demos/tooltip/wrapper/demo.en-US.vue
@@ -1,7 +1,9 @@
 <template>
-  <Tooltip wrapper style="display: inline-flex; padding: 10px; border: var(--vxp-border-base);">
+  <Tooltip wrapper style="display: inline-block; padding: 10px; border: var(--vxp-border-base);">
     <template #trigger>
       <Button> Tooltip </Button>
+      <br />
+      <span>Can be fragment after using wrapper</span>
     </template>
     A tooltip with wrapping element
   </Tooltip>

diff --git a/docs/demos/tooltip/wrapper/demo.zh-CN.vue b/docs/demos/tooltip/wrapper/demo.zh-CN.vue
@@ -1,7 +1,9 @@
 <template>
-  <Tooltip wrapper style="display: inline-flex; padding: 10px; border: var(--vxp-border-base);">
+  <Tooltip wrapper style="display: inline-block; padding: 10px; border: var(--vxp-border-base);">
     <template #trigger>
       <Button> 气泡提示 </Button>
+      <br />
+      <span>添加了包围元素后可以使用片段了</span>
     </template>
     带有包围元素的气泡提示
   </Tooltip>