fix(notify): 修复重复点击偶尔无法触发

nutui-uniapp · Nov 20, 2023 · d044ac9 · d044ac9 · vercel · Nov 20, 2023
1 parent 4847ae9
commit d044ac9
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 28 deletions.
diff --git a/example/src/pages/demo/feedback/notify/index.vue b/example/src/pages/demo/feedback/notify/index.vue
@@ -31,7 +31,7 @@ export default {
       typeRef.value?.showNotify({
         type,
         msg: desc,
-        duration: 500,
+        duration: 1500,
       })
     }
 
@@ -165,7 +165,7 @@ export default {
       <nut-cell is-link @click="showNotify1">
         留出顶部安全距离
       </nut-cell>
-      <nut-notify v-model:visible="show1" :duration="500000" safe-area-inset-top>
+      <nut-notify v-model:visible="show1" :duration="5000" safe-area-inset-top>
         <span>Content</span>
       </nut-notify>
     </nut-cell-group>

diff --git a/example/src/pages/demo/feedback/toast/index.vue b/example/src/pages/demo/feedback/toast/index.vue
@@ -8,13 +8,9 @@ export default {
     const toastRef = ref<ToastInst>()
     const refClick = (type: string, msg: string) => {
       toastRef.value?.showToast[type as 'fail' | 'success' | 'warn' | 'loading'](msg, {
-        title: '使用ref调用更加方便与灵活',
-        duration: 0,
+        title: `使用ref调用更加方便与灵活 + ${type}`,
+        duration: 2000,
       })
-
-      setTimeout(() => {
-        toastRef.value?.hideToast()
-      }, 1000)
     }
     const page = {
       state: reactive({

diff --git a/packages/nutui/components/notify/notify.vue b/packages/nutui/components/notify/notify.vue
@@ -43,7 +43,7 @@ export default defineComponent({
 </script>
 
 <template>
-  <NutPopUp v-model:visible="isShowPopup" :custom-style="notifyStatus.safeAreaInsetTop ? `top:${safeHeight}px` : ''" safe-area-inset-bottom safe-area-inset-top :z-index="99999999" :position="notifyStatus.position || props.position" :overlay="false">
+  <NutPopUp v-model:visible="isShowPopup" :custom-style="notifyStatus.safeAreaInsetTop ? `top:${safeHeight}px` : ''" safe-area-inset-bottom safe-area-inset-top :z-index="99999999" :position="notifyStatus.position" :overlay="false">
     <div
       :class="classes"
       :style="styles"
@@ -53,7 +53,7 @@ export default defineComponent({
         <slot />
       </template>
       <template v-else>
-        {{ notifyStatus.msg || props.msg }}
+        {{ notifyStatus.msg }}
       </template>
     </div>
   </NutPopUp>

diff --git a/packages/nutui/components/notify/use-notify.ts b/packages/nutui/components/notify/use-notify.ts
@@ -7,11 +7,13 @@ export function useNotify(props: NotifyProps, emit: SetupContext<NotifyEmits>['e
   const clickCover = () => {
     props.onClick && props.onClick()
   }
-  // timer
-  let timer: null | any = null
+  let timer: NodeJS.Timeout | null | undefined
+
   const clearTimer = () => {
-    timer && clearTimeout(timer)
-    timer = null
+    if (timer) {
+      timer && clearTimeout(timer)
+      timer = null
+    }
   }
   // watch show popup
   const isShowPopup = ref<boolean>(false)
@@ -34,14 +36,9 @@ export function useNotify(props: NotifyProps, emit: SetupContext<NotifyEmits>['e
     }
   }
 
-  // hide popup
-  const hide = () => {
-    emit(UPDATE_VISIBLE_EVENT, false)
-  }
-
   const hideNotify = () => {
     isShowPopup.value = false
-    hide()
+    emit(UPDATE_VISIBLE_EVENT, false)
   }
 
   const showNotify = (option: NotifyOptions) => {
@@ -56,22 +53,21 @@ export function useNotify(props: NotifyProps, emit: SetupContext<NotifyEmits>['e
       safeAreaInsetTop: option.safeAreaInsetTop || props.safeAreaInsetTop,
 
     }
-    isShowPopup.value = true
-
-    if (timer)
-      clearTimeout(timer)
 
-    timer = setTimeout(hideNotify, notifyStatus.value.duration)
+    clearTimer()
+    isShowPopup.value = true
+    if (notifyStatus.value.duration && notifyStatus.value.duration > 0)
+      timer = setTimeout(hideNotify, notifyStatus.value.duration)
   }
 
   watch(
     () => props.visible,
     (newVal: boolean) => {
-      isShowPopup.value = props.visible
+      isShowPopup.value = newVal
       const DURATION: number = notifyStatus.value.duration!
       if (newVal && DURATION) {
         timer = setTimeout(() => {
-          hide()
+          hideNotify()
         }, DURATION)
       }
     },

diff --git a/packages/nutui/components/toast/use-toast.ts b/packages/nutui/components/toast/use-toast.ts
@@ -36,14 +36,14 @@ export function useToast(props: ToastProps, emit: SetupContext<ToastEmits>['emit
     closeOnClickOverlay: props.closeOnClickOverlay,
   })
   const clearTimer = () => {
-    isShowToast.value = false
     if (timer) {
       clearTimeout(timer)
       timer = null
     }
   }
 
   const hide = () => {
+    isShowToast.value = false
     emit(UPDATE_VISIBLE_EVENT, false)
     emit(CLOSED_EVENT)
   }