dev

frontend/src/components/base/README

@@ -1 +1 @@
-无样式的基础组件
+无样式的基础组件

frontend/src/components/base/index.ts

@@ -1 +1 @@
-export { default as NTooltip } from "./tooltip"
+export { default as NTooltip } from './tooltip'

frontend/src/components/base/tooltip.tsx

@@ -1,42 +1,52 @@
-import { syncRefs, useVModel } from "@vueuse/core"
-import type { CSSProperties, PropType } from "vue";
-import { Teleport, Transition, computed, defineComponent, nextTick, reactive, ref, renderSlot, watch } from "vue"
-import { provideShow } from "../hooks/show"
+import { syncRefs, useVModel } from '@vueuse/core'
+import type { CSSProperties, PropType } from 'vue'
+import {
+  Teleport,
+  Transition,
+  computed,
+  defineComponent,
+  nextTick,
+  reactive,
+  ref,
+  renderSlot,
+  watch,
+} from 'vue'
+import { provideShow } from '../hooks/show'
 
 export const tooltipProps = {
   popClass: {
-    type: String
+    type: String,
   },
   position: {
-    type: String as PropType<"bottom" | "top" | "left" | "right" | "auto">,
-    default: () => "auto"
+    type: String as PropType<'bottom' | 'top' | 'left' | 'right' | 'auto'>,
+    default: () => 'auto',
   },
   offset: {
     type: Number,
-    default: () => 8
+    default: () => 8,
   },
   lazy: {
     type: Boolean,
-    default: () => false
+    default: () => false,
   },
   visible: {
     type: Boolean,
-    default: () => false
+    default: () => false,
   },
   disabled: {
     type: Boolean,
-    default: () => false
-  }
+    default: () => false,
+  },
 }
 
 export default defineComponent({
-  name: "ITooltip",
+  name: 'ITooltip',
   props: tooltipProps,
-  emits: ["change", "update:visible"],
+  emits: ['change', 'update:visible'],
   setup(props, { slots, emit }) {
     const isOpen = ref(props.visible)
 
-    syncRefs(useVModel(props, "visible"), isOpen)
+    syncRefs(useVModel(props, 'visible'), isOpen)
 
     provideShow(isOpen)
 
@@ -47,13 +57,19 @@ export default defineComponent({
 
     const dropdownPosition = reactive({ x: 0, y: 0 })
 
-    const isShow = computed(() => isOpen.value && triggerRef.value && popupRef.value && dropdownPosition.x + dropdownPosition.y > 0)
+    const isShow = computed(
+      () =>
+        isOpen.value &&
+        triggerRef.value &&
+        popupRef.value &&
+        dropdownPosition.x + dropdownPosition.y > 0,
+    )
 
     const dropdownStyle = computed<CSSProperties>(() => {
       return {
         left: `${dropdownPosition.x}px`,
         top: `${dropdownPosition.y}px`,
-        visibility: isShow.value ? "visible" : "hidden"
+        visibility: isShow.value ? 'visible' : 'hidden',
       }
     })
 
@@ -66,9 +82,9 @@ export default defineComponent({
       timer = setTimeout(
         () => {
           isOpen.value = true
-          emit("change", true)
+          emit('change', true)
         },
-        props.lazy ? 800 : 100
+        props.lazy ? 800 : 100,
       )
     }
 
@@ -78,7 +94,7 @@ export default defineComponent({
       }
       clearTimeout(timer)
       isOpen.value = false
-      emit("change", false)
+      emit('change', false)
     }
 
     function resize() {
@@ -96,34 +112,37 @@ export default defineComponent({
         const offset = props.offset
 
         switch (props.position) {
-          case "auto":
-          case "bottom":
+          case 'auto':
+          case 'bottom':
             x = left + width / 2
             y = top + height + offset
             break
-          case "top":
+          case 'top':
             x = left
             y = top - pHeight - offset
             break
-          case "left":
+          case 'left':
             x = left - pWidth - offset
             y = top
             break
-          case "right":
+          case 'right':
             x = left + width + offset
             y = top
             break
         }
-        if (props.position == "auto") {
+        if (props.position == 'auto') {
           x = window.innerWidth - x > 500 ? x + 20 : x - 20 - 310
-          y = window.innerHeight - y > popup.offsetHeight + 50 ? y : window.innerHeight - (popup.offsetHeight + 50)
+          y =
+            window.innerHeight - y > popup.offsetHeight + 50
+              ? y
+              : window.innerHeight - (popup.offsetHeight + 50)
         }
         dropdownPosition.x = x
         dropdownPosition.y = y
       }
     }
 
-    watch(isOpen, val => {
+    watch(isOpen, (val) => {
       if (val) {
         mounted.value = true
       }
@@ -133,12 +152,16 @@ export default defineComponent({
     return () => {
       return (
         <div {...{ onMouseout, onMouseover }} ref={triggerRef}>
-          {renderSlot(slots, "default")}
+          {renderSlot(slots, 'default')}
           <Teleport to="body">
             <Transition name="dropdown" mode="out-in">
               {mounted.value && !props.disabled && (
-                <div class={["i-popper z-999", props.popClass]} style={dropdownStyle.value} ref={popupRef}>
-                  {renderSlot(slots, "popper")}
+                <div
+                  class={['i-popper z-999', props.popClass]}
+                  style={dropdownStyle.value}
+                  ref={popupRef}
+                >
+                  {renderSlot(slots, 'popper')}
                 </div>
               )}
             </Transition>
@@ -146,5 +169,5 @@ export default defineComponent({
         </div>
       )
     }
-  }
+  },
 })