feat: 代码最终优化

Author: vaebe

packages/ccui/ui/tooltip/src/tooltip-types.ts

@@ -1,15 +1,29 @@
 import type { ExtractPropTypes, PropType } from 'vue'
 
 export type TooltipPlacement
-  = | 'top' | 'top-start' | 'top-end'
-    | 'bottom' | 'bottom-start' | 'bottom-end'
-    | 'left' | 'left-start' | 'left-end'
-    | 'right' | 'right-start' | 'right-end'
+  = | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
 
 export type TooltipEffect = 'dark' | 'light'
 
 export type TooltipTrigger = 'hover' | 'click' | 'focus' | 'manual'
 
+export interface TooltipEmits {
+  'show': () => void
+  'hide': () => void
+  'update:visible': (visible: boolean) => void
+}
+
 export const tooltipProps = {
   // 基础属性
   content: {
@@ -83,9 +97,14 @@ export const tooltipProps = {
 export type TooltipProps = ExtractPropTypes<typeof tooltipProps>
 
 export interface TooltipEmits {
+  /** 显示前触发 */
   'before-show': () => void
+  /** 显示时触发 */
   'show': () => void
+  /** 隐藏前触发 */
   'before-hide': () => void
+  /** 隐藏时触发 */
   'hide': () => void
+  /** 当 visible 状态改变时触发 */
   'update:visible': (visible: boolean) => void
 }

packages/ccui/ui/tooltip/src/tooltip.scss

@@ -69,8 +69,10 @@
 
 // 响应式设计
 @media (max-width: 768px) {
-  .ccui-tooltip__popper {
-    font-size: 14px;
-    max-width: calc(100vw - 20px);
+  .ccui-tooltip {
+    &__popper {
+      font-size: 14px;
+      max-width: calc(100vw - 20px);
+    }
   }
 }

packages/ccui/ui/tooltip/src/tooltip.tsx

@@ -85,20 +85,7 @@ export default defineComponent({
 
       clearTimers()
 
-      if (props.showAfter > 0) {
-        showTimer.value = window.setTimeout(() => {
-          emit('before-show')
-          if (!isControlled.value) {
-            visible.value = true
-          }
-          emit('update:visible', true)
-          nextTick(() => {
-            update()
-            emit('show')
-          })
-        }, props.showAfter)
-      }
-      else {
+      const showTooltip = () => {
         emit('before-show')
         if (!isControlled.value) {
           visible.value = true
@@ -109,29 +96,33 @@ export default defineComponent({
           emit('show')
         })
       }
+
+      if (props.showAfter > 0) {
+        showTimer.value = window.setTimeout(showTooltip, props.showAfter)
+      }
+      else {
+        showTooltip()
+      }
     }
 
     const doHide = () => {
       clearTimers()
 
-      if (props.hideAfter > 0 && props.trigger !== 'click') {
-        hideTimer.value = window.setTimeout(() => {
-          emit('before-hide')
-          if (!isControlled.value) {
-            visible.value = false
-          }
-          emit('update:visible', false)
-          emit('hide')
-        }, props.hideAfter)
-      }
-      else {
+      const hideTooltip = () => {
         emit('before-hide')
         if (!isControlled.value) {
           visible.value = false
         }
         emit('update:visible', false)
         emit('hide')
       }
+
+      if (props.hideAfter > 0 && props.trigger !== 'click') {
+        hideTimer.value = window.setTimeout(hideTooltip, props.hideAfter)
+      }
+      else {
+        hideTooltip()
+      }
     }
 
     // 事件处理

packages/docs/components/tooltip/index.md

@@ -490,7 +490,7 @@ export default defineComponent({
 | effect                    | 默认提供的主题                             | string  | dark/light                                                                                                | dark   |
 | visible / v-model:visible | 状态是否可见                               | boolean | —                                                                                                         | false  |
 | disabled                  | Tooltip 是否可用                           | boolean | —                                                                                                         | false  |
-| offset                    | 出现位置的偏移量                           | number  | —                                                                                                         | 12     |
+| offset                    | 出现位置的偏移量                           | number  | —                                                                                                         | 8      |
 | show-after                | 延迟出现，单位毫秒                         | number  | —                                                                                                         | 0      |
 | hide-after                | 延迟关闭，单位毫秒                         | number  | —                                                                                                         | 200    |
 | show-arrow                | 是否显示 Tooltip 箭头                      | boolean | —                                                                                                         | true   |