fix(notify): fix notify duration (#1810)

src/packages/__VUE/notify/__test__/notify.spec.ts

@@ -1,6 +1,11 @@
 import { mount } from '@vue/test-utils';
 import Notify from '../index.vue';
-import { nextTick } from 'vue';
+
+const sleep = (delay = 0): Promise<void> => {
+  return new Promise((resolve) => {
+    setTimeout(resolve, delay);
+  });
+};
 
 describe('Notify', () => {
   test('base notify', () => {
@@ -50,4 +55,17 @@ describe('Notify', () => {
     const rate = wrapper.findAll('.xxx');
     expect(rate.length).toBe(1);
   });
+
+  test('base notify message', async () => {
+    const wrapper = mount(Notify, {
+      props: {
+        isWrapTeleport: false,
+        visible: true,
+        duration: 3000
+      }
+    });
+    await sleep(3001);
+    const notify = wrapper.find('.nut-popup').find('.nut-notify');
+    expect((notify.element as HTMLElement).style.display).toEqual('');
+  });
 });

src/packages/__VUE/notify/__test__/notify.ts

@@ -2,7 +2,6 @@ import { createVNode, defineComponent, render, h, onMounted } from 'vue';
 import Notify from '../index.vue';
 const defaultOptions = {
   type: 'base',
-  showPopup: false,
   msg: '',
   color: undefined,
   background: undefined,

src/packages/__VUE/notify/demo.vue

@@ -16,7 +16,7 @@
     </nut-cell-group>
     <nut-cell-group :title="translate('useTemplate')">
       <nut-cell is-Link @click="showNotify">{{ translate('useTemplate') }}</nut-cell>
-      <nut-notify v-model:visible="show">
+      <nut-notify v-model:visible="show" :duration="2000">
         <span>Content</span>
       </nut-notify>
     </nut-cell-group>
@@ -95,9 +95,6 @@ export default createDemo({
     const show = ref(false);
     const showNotify = () => {
       show.value = true;
-      setTimeout(() => {
-        show.value = false;
-      }, 2000);
     };
     return {
       baseNotify,

src/packages/__VUE/notify/doc.en-US.md

@@ -132,7 +132,7 @@ export default {
 <template>
   <nut-cell-group title="Template use">
     <nut-cell is-Link @click="showNotify">Template use</nut-cell>
-    <nut-notify v-model:visible="show">
+    <nut-notify v-model:visible="show" :duration="2000">
       <span>Content</span>
     </nut-notify>
   </nut-cell-group>
@@ -145,9 +145,6 @@ export default {
     const show = ref(false);
     const showNotify = () => {
       show.value = true;
-      setTimeout(() => {
-        show.value = false;
-      }, 2000);
     };
     return {
       show,
@@ -168,7 +165,7 @@ export default {
 |------------|----------------------------------------------------------|---------------|----------|
 | type       | Display Type（primary,success ,danger,warning）      | String        | 'danger' |
 | message    | Display copy, support line feed through \n              | Boolean       | false    |
-| duration   | Display duration (ms),value is 0 ,notify not disappear | String        | 3000     |
+| duration   | Display duration (ms),value is 0 ,notify not disappear | Number        | 3000     |
 | color      | Font Color                                               | String        | -        |
 | background | Background color                                         | String        | -        |
 | class-name | Custom class name                                        | String/Number | 1        |

src/packages/__VUE/notify/doc.md

@@ -125,7 +125,7 @@ export default {
 <template>
   <nut-cell-group title="组件调用">
     <nut-cell is-Link @click="showNotify">组件调用</nut-cell>
-    <nut-notify v-model:visible="show">
+    <nut-notify v-model:visible="show" :duration="2000">
       <span>Content</span>
     </nut-notify>
   </nut-cell-group>
@@ -138,9 +138,6 @@ export default {
     const show = ref(false);
     const showNotify = () => {
       show.value = true;
-      setTimeout(() => {
-        show.value = false;
-      }, 2000);
     };
     return {
       show,
@@ -160,7 +157,7 @@ export default {
 |------------|-------------------------------------------------------|---------------|----------|
 | type       | 提示的信息类型（primary，success  ，danger，warning） | String        | 'danger' |
 | message    | 展示文案，支持通过\n换行                              | Boolean       | false    |
-| duration   | 展示时长(ms)，值为 0 时，notify 不会消失              | String        | 3000     |
+| duration   | 展示时长(ms)，值为 0 时，notify 不会消失              | Number        | 3000     |
 | color      | 字体颜色                                              | String        | 空       |
 | background | 背景颜色                                              | String        | 空       |
 | class-name | 自定义类名                                            | String/Number | 1        |

src/packages/__VUE/notify/index.ts

@@ -3,7 +3,6 @@ import { App } from 'vue';
 import Notify from './index.vue';
 const defaultOptions = {
   type: 'base',
-  // showPopup: true,
   visible: true,
   msg: '',
   color: undefined,

src/packages/__VUE/notify/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <nut-popup v-model:visible="showPopup" :position="position" :overlay="false" :isWrapTeleport="isWrapTeleport">
+  <nut-popup v-model:visible="isShowPopup" :position="position" :overlay="false" :isWrapTeleport="isWrapTeleport">
     <div
       :class="['nut-notify', `nut-notify--${type}`, className]"
       :style="{ color: color, background: background }"
@@ -13,7 +13,7 @@
   </nut-popup>
 </template>
 <script lang="ts">
-import { reactive, onMounted, watch, ref } from 'vue';
+import { ref, watch } from 'vue';
 import { createComponent } from '../../utils/create';
 import Popup from '../popup/index.vue';
 const { create } = createComponent('notify');
@@ -36,11 +36,7 @@ export default create({
       type: String,
       default: 'danger'
     },
-    // showPopup: {
-    //   type: Boolean,
-    //   default: false
-    // },
-    modelVisible: {
+    visible: {
       type: Boolean,
       default: false
     },
@@ -56,64 +52,50 @@ export default create({
     onClick: Function,
     unmount: Function
   },
-
-  setup(props) {
-    let timer: null | number = null;
-    const state = reactive({
-      mounted: false
-    });
-    onMounted(() => {
-      // state.mounted = true;
-    });
-
-    const showPopup = ref(props.modelVisible);
-
+  emits: ['update:visible'],
+  setup(props, { emit }) {
     const clickCover = () => {
       props.onClick && props.onClick();
     };
+
+    // timer
+    let timer: null | number = null;
     const clearTimer = () => {
-      if (timer) {
-        clearTimeout(timer);
-        timer = null;
-      }
+      timer && clearTimeout(timer);
+      timer = null;
     };
+
+    // hide popup
     const hide = () => {
-      state.mounted = false;
-    };
-    const show = () => {
-      clearTimer();
-      if (props.duration) {
-        timer = setTimeout(() => {
-          hide();
-        }, props.duration);
-      }
+      emit('update:visible', false);
     };
 
-    if (props.duration) {
-      show();
-    }
+    // watch show popup
+    const isShowPopup = ref<boolean>(false);
 
-    watch(
-      () => props.duration,
-      (val) => {
-        if (val) {
-          show();
+    const unWatch = watch(
+      () => props.visible,
+      (newVal: boolean) => {
+        isShowPopup.value = props.visible;
+
+        const DURATION: number = props.duration;
+        if (newVal && DURATION) {
+          timer = setTimeout(() => {
+            hide();
+          }, DURATION);
         }
-      }
+      },
+      { immediate: true }
     );
 
-    // watch(
-    //   () => props.visible,
-    //   (val, oldv) => {
-    //     state.mounted = val;
-    //   }
-    // );
     const onAfterLeave = () => {
       clearTimer();
+      unWatch && unWatch();
       props.unmount && props.unmount(props.id);
       props.onClose && props.onClose();
     };
-    return { state, hide, onAfterLeave, clickCover, showPopup };
+
+    return { onAfterLeave, clickCover, isShowPopup };
   }
 });
 </script>