feat: notify更新

src/packages/notify/demo.vue

@@ -25,7 +25,9 @@ export default createDemo({
       isVisible4: false
     });
     const notify1 = msg => {
-      Notify.text('hello');
+      Notify.text('hello', {
+        duration: 1000
+      });
     };
     return {
       notify1

src/packages/notify/index.scss

@@ -1,2 +1,41 @@
+@import '../../styles/variables.scss';
+.popup-top {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  overflow-y: auto;
+  transition: transform 0.3s;
+  z-index: 9999;
+  // &.round {
+  //   border-radius: 0 0 $popup-border-radius $popup-border-radius;
+  // }
+}
+
 .nut-notify {
+  box-sizing: border-box;
+  padding: $notify-padding;
+  color: $notify-text-color;
+  font-size: $notify-font-size;
+  line-height: $notify-line-height;
+
+  white-space: pre-wrap;
+  text-align: center;
+  word-wrap: break-word;
+
+  &--primary {
+    background-color: $notify-primary-background-color;
+  }
+
+  &--success {
+    background-color: $notify-success-background-color;
+  }
+
+  &--danger {
+    background-color: $notify-danger-background-color;
+  }
+
+  &--warning {
+    background-color: $notify-warning-background-color;
+  }
 }

src/packages/notify/index.vue

@@ -1,13 +1,18 @@
 <template>
-  <!-- <view class="nut-notify"> -->
   <Transition name="toast-fade">
     <view
-      :class="toastBodyClass"
-      v-show="state.mounted"
+      :class="[
+        'popup-top',
+        'round',
+        'nut-notify',
+        `nut-notify--${type}`,
+        { className }
+      ]"
       :style="{
         bottom: center ? 'auto' : bottom + 'px',
         'background-color': coverColor
       }"
+      v-show="state.mounted"
       @click="clickCover"
     >
       <template v-if="$slots.default">
@@ -19,31 +24,70 @@
   <!-- </view> -->
 </template>
 <script lang="ts">
-import { toRefs, reactive, onMounted } from 'vue';
+import { toRefs, reactive, onMounted, watch } from 'vue';
 import { createComponent } from '@/utils/create';
 import Popup from '@/packages/popup/index.vue';
 const { componentName, create } = createComponent('notify');
 
 export default create({
   props: {
-    color: String,
-    message: [Number, String],
-    className: null,
-    background: String,
+    color: { type: String, default: '' },
+    msg: { type: Number, default: '' },
+    duration: { type: Number, default: 3000 },
+    className: {
+      type: String,
+      default: ''
+    },
+    background: { type: String, default: '' },
     type: {
       type: String,
       default: 'danger'
+    },
+    showPopup: {
+      type: Boolean,
+      default: false
     }
   },
 
   setup(props, { slots }) {
+    let timer;
     const state = reactive({
       mounted: false
     });
     onMounted(() => {
       state.mounted = true;
     });
-    return { state };
+    const clearTimer = () => {
+      if (timer) {
+        clearTimeout(timer);
+        timer = null;
+      }
+    };
+    const hide = () => {
+      state.mounted = false;
+    };
+    const show = () => {
+      clearTimer();
+      if (props.duration) {
+        timer = setTimeout(() => {
+          hide();
+        }, props.duration);
+      }
+    };
+
+    if (props.duration) {
+      show();
+    }
+
+    watch(
+      () => props.duration,
+      val => {
+        if (val) {
+          show();
+        }
+      }
+    );
+    return { state, hide };
   }
 });
 </script>

src/styles/variables.scss

@@ -149,3 +149,13 @@ $zindex-mask: 9998 !default;
 $zindex-actionsheet: 10001 !default;
 $zindex-dialog: 10000 !default;
 $zindex-picker: 10050 !default;
+
+// Notify
+$notify-text-color: #fff;
+$notify-padding: 8px 16px;
+$notify-font-size: $font-size-base;
+$notify-line-height: 20px;
+$notify-primary-background-color: #1989fa;
+$notify-success-background-color: #07c160;
+$notify-danger-background-color: #ee0a24;
+$notify-warning-background-color: #ff976a;