Browse Source

feat: tooltip

ljc 1 week ago
parent
commit
815631544b
4 changed files with 50 additions and 20 deletions
  1. 4 4
      components/cwg-link.vue
  2. 8 8
      pages/login/index.vue
  3. 2 2
      pages/login/reset.vue
  4. 36 6
      utils/useMouseTooltip.js

+ 4 - 4
components/cwg-link.vue

@@ -1,16 +1,16 @@
 <template>
   <!-- #ifdef H5 -->
   <!-- H5 端:支持普通跳转 / PDF预览 / 文件下载 -->
-  <a v-if="isDownload" class="pdf-link" :href="url" :download="downloadName" target="_blank" :title="resolvedTitle">
+  <a v-if="isDownload" class="pdf-link cursor-pointer" :href="url" :download="downloadName" target="_blank" :title="resolvedTitle" :data-tooltip="resolvedTitle" data-placement="top">
     <slot v-if="slots['default']"></slot>
     <view v-else>{{ t(props.title) || props.title }}</view>
   </a>
-  <a v-else-if="isHtml" class="pdf-link" :href="url" :target="target || '_blank'" :title="resolvedTitle"
-    rel="noopener noreferrer">
+  <a v-else-if="isHtml" class="pdf-link cursor-pointer" :href="url" :target="target || '_blank'" :title="resolvedTitle"
+    rel="noopener noreferrer" :data-tooltip="resolvedTitle" data-placement="top">
     <slot v-if="slots['default']"></slot>
     <view v-else>{{ t(props.title) || props.title }}</view>
   </a>
-  <view v-else class="pdf-link" @click="handleClick">
+  <view v-else class="pdf-link cursor-pointer" @click="handleClick" :data-tooltip="t(props.title) || props.title" data-placement="top">
     <slot v-if="slots['default']"></slot>
     <view v-else>{{ t(props.title) || props.title }}</view>
   </view>

+ 8 - 8
pages/login/index.vue

@@ -65,8 +65,8 @@
 
             </view>
             <view class="tab-list">
-              <view v-for="tab in tabs" :key="tab.value" class="tab-item" :class="{ active: activeTab === tab.value }"
-                @click="handleClick(tab.value)">
+              <view v-for="tab in tabs" :key="tab.value" class="tab-item cursor-pointer" :class="{ active: activeTab === tab.value }"
+                @click="handleClick(tab.value)" :data-tooltip="tab.text" data-placement="top">
                 <text class="tab-label">{{ tab.text }}</text>
               </view>
             </view>
@@ -98,7 +98,7 @@
                       :label="t('newSignin.item5')" name="记住我" class="wcg-checkbox"></up-checkbox>
                   </up-checkbox-group>
                 </view>
-                <navigator url="/pages/login/reset" class="account-tip">
+                <navigator url="/pages/login/reset" class="account-tip cursor-pointer" :data-tooltip="t('signin.forget')" data-placement="top">
                   <text>{{ t('signin.forget') }}</text>
                 </navigator>
               </view>
@@ -107,13 +107,13 @@
                   {{ t('signin.login') }}
                 </button>
               </view>
-              <view @click="activeTab = 2" class="account-tip">
+              <view @click="activeTab = 2" class="account-tip cursor-pointer" :data-tooltip="t('signin.signup')" data-placement="top">
                 {{ t('signin.words') }}
                 <text>{{ t('signin.signup') }}</text>
               </view>
               <view class="des-bottom">
                 <text v-t="'vu.login.agreemnet1'"></text>
-                <cwg-link type="pdf" url='pdf/Client_Agreement.pdf' target="_blank" :title="'signup.agreemnet2'"
+                <cwg-link type="pdf" url='pdf/Client_Agreement.pdf'  target="_blank" :title="'signup.agreemnet2'"
                           class="desc-link" />
                 <text v-t="'signup.agreemnet3'"></text>
                 <cwg-link type="pdf" url='pdf/Terms&Conditions.pdf' target="_blank" :title="'signup.agreemnet4'"
@@ -168,7 +168,7 @@
                               :placeholder="t('newSignup.item10')">
                             </uni-easyinput>
                           </view>
-                          <view class="btn-code" @click="(!isAgeValid || !formData.birthDate) ? '' : handleGetCode()">
+                          <view class="btn-code cursor-pointer" :data-tooltip="getCodeString" data-placement="top" @click="(!isAgeValid || !formData.birthDate) ? '' : handleGetCode()">
                             {{ getCodeString }}
                           </view>
                         </view>
@@ -221,12 +221,12 @@
                   </uni-forms-item>
                 </uni-forms>
               </view>
-              <view>
+              <view class="cursor-pointer" :data-tooltip="t('signup.button')" data-placement="top">
                 <button class="regiset-btn" @click="register">
                   {{ t('signup.button') }}
                 </button>
               </view>
-              <view class="login-link">
+              <view class="login-link cursor-pointer" :data-tooltip="t('newSignup.item17')" data-placement="top">
                 <text>{{ t('newSignup.item16') }}</text>
                 <view class="link" @click="activeTab = 1">{{ t('newSignup.item17') }}</view>
               </view>

+ 2 - 2
pages/login/reset.vue

@@ -24,10 +24,10 @@
               <uni-easyinput v-model="email" :placeholder="t('newSignup.item7')" class="custom-input">
               </uni-easyinput>
 
-              <view class="reset-button">
+              <view class="reset-button cursor-pointer" :data-tooltip="t('forget.forget')" data-placement="top">
                 <button class="btn btn-danger" @click="handleReset">{{ t('forget.forget') }}</button>
               </view>
-              <view class="login-link">
+              <view class="login-link cursor-pointer" :data-tooltip="t('forget.cancel')" data-placement="top">
                 <button @click="handleLogin" class="link-text">{{ t('forget.cancel') }}</button>
               </view>
             </view>

+ 36 - 6
utils/useMouseTooltip.js

@@ -3,18 +3,46 @@ let r = null
 let l = null
 
 export function useMouseTooltip() {
-    // 🔥 修复:进入元素时 立刻更新位置 + 节流合并
+    const TOOLTIP_WIDTH = 80
+    const TOOLTIP_HEIGHT = 40
+    const PADDING = 16
+
+    const updateTooltipPosition = (clientX, clientY) => {
+        const viewportWidth = window.innerWidth
+        const viewportHeight = window.innerHeight
+
+        let x = clientX
+        let y = clientY
+        let flipX = false
+        let flipY = false
+
+        if (clientX + TOOLTIP_WIDTH + PADDING > viewportWidth) {
+            x = clientX - TOOLTIP_WIDTH - PADDING
+            flipX = true
+        }
+
+        if (clientY + TOOLTIP_HEIGHT + PADDING > viewportHeight) {
+            y = clientY - TOOLTIP_HEIGHT - PADDING
+            flipY = true
+        }
+
+        x = Math.max(PADDING, x)
+        y = Math.max(PADDING, y)
+
+        document.documentElement.style.setProperty('--mouse-x', x + 'px')
+        document.documentElement.style.setProperty('--mouse-y', y + 'px')
+        document.documentElement.style.setProperty('--tooltip-flip-x', flipX ? 'true' : 'false')
+        document.documentElement.style.setProperty('--tooltip-flip-y', flipY ? 'true' : 'false')
+    }
+
     const u = (e, instant = false) => {
-        // 切换元素时 → 强制立刻刷新
         if (instant) {
-            document.documentElement.style.setProperty('--mouse-x', e.clientX + 'px')
-            document.documentElement.style.setProperty('--mouse-y', e.clientY + 'px')
+            updateTooltipPosition(e.clientX, e.clientY)
         }
 
         clearTimeout(t)
         t = setTimeout(() => {
-            document.documentElement.style.setProperty('--mouse-x', e.clientX + 'px')
-            document.documentElement.style.setProperty('--mouse-y', e.clientY + 'px')
+            updateTooltipPosition(e.clientX, e.clientY)
         }, 200)
     }
 
@@ -22,6 +50,8 @@ export function useMouseTooltip() {
         clearTimeout(t)
         document.documentElement.style.removeProperty('--mouse-x')
         document.documentElement.style.removeProperty('--mouse-y')
+        document.documentElement.style.removeProperty('--tooltip-flip-x')
+        document.documentElement.style.removeProperty('--tooltip-flip-y')
     }
 
     const i = () => {