feat: 完善Notify组件

src/packages/notify/demo.vue

@@ -1,36 +1,106 @@
 <template>
   <div class="demo">
     <h2>基础用法</h2>
-    <nut-cell :showIcon="true" :isLink="true" @click="notify1('isVisible1')">
+    <nut-cell :showIcon="true" :isLink="true" @click="baseNotify('基础用法')">
       <span>
         <label>基础用法</label>
       </span>
     </nut-cell>
+    <h2>通知类型</h2>
+    <nut-cell
+      :showIcon="true"
+      :isLink="true"
+      @click="primaryNotify('主要通知')"
+    >
+      <span>
+        <label>主要通知</label>
+      </span>
+    </nut-cell>
+    <nut-cell
+      :showIcon="true"
+      :isLink="true"
+      @click="successNotify('成功通知')"
+    >
+      <span>
+        <label>成功通知</label>
+      </span>
+    </nut-cell>
+    <nut-cell :showIcon="true" :isLink="true" @click="errorNotify('危险通知')">
+      <span>
+        <label>危险通知</label>
+      </span>
+    </nut-cell>
+    <nut-cell
+      :showIcon="true"
+      :isLink="true"
+      @click="warningNotify('警告通知')"
+    >
+      <span>
+        <label>警告通知</label>
+      </span>
+    </nut-cell>
+    <h2>自定义样式</h2>
+    <nut-cell
+      :showIcon="true"
+      :isLink="true"
+      @click="cusBgNotify('自定义背景色和字体颜色')"
+    >
+      <span>
+        <label>自定义背景色和字体颜色</label>
+      </span>
+    </nut-cell>
+    <h2>自定义时长</h2>
+    <nut-cell :showIcon="true" :isLink="true" @click="timeNotify('自定义时长')">
+      <span>
+        <label>自定义时长</label>
+      </span>
+    </nut-cell>
   </div>
 </template>
 
 <script lang="ts">
-import { reactive, createApp } from 'vue';
+import { createApp } from 'vue';
 import { createComponent } from '@/utils/create';
 import { Notify } from './notify';
 const { createDemo } = createComponent('notify');
-// const app = createApp({});
-// app.use(notify);
 export default createDemo({
   setup() {
-    const state = reactive({
-      isVisible1: false,
-      isVisible2: false,
-      isVisible3: false,
-      isVisible4: false
-    });
-    const notify1 = msg => {
-      Notify.text('hello', {
-        duration: 1000
+    const baseNotify = msg => {
+      Notify.text(msg, {
+        onClose: () => {
+          console.log('close');
+        },
+        onClick: () => {
+          console.log('click');
+        }
       });
     };
+    const primaryNotify = msg => {
+      Notify.primary(msg);
+    };
+    const successNotify = msg => {
+      Notify.success(msg);
+    };
+    const errorNotify = msg => {
+      Notify.danger(msg);
+    };
+    const warningNotify = msg => {
+      Notify.warn(msg);
+    };
+    const cusBgNotify = msg => {
+      Notify.text(msg, { color: '#ad0000', background: '#ffe1e1' });
+    };
+    const timeNotify = msg => {
+      Notify.text(msg, { duration: 10000 });
+    };
     return {
-      notify1
+      baseNotify,
+      primaryNotify,
+      successNotify,
+      errorNotify,
+      warningNotify,
+      cusBgNotify,
+      timeNotify
     };
   }
 });

src/packages/notify/doc.md

@@ -1,34 +1,94 @@
 #  notify组件
 
-    ### 介绍
+### 介绍
     
-    基于 xxxxxxx
-    
-    ### 安装
-    
-    
-    
-    ## 代码演示
-    
-    ### 基础用法1
+在页面顶部展示消息提示
     
+### 安装
+``` javascript
+import { createApp } from 'vue';
+import { Notify } from '@nutui/nutui';
 
+const app = createApp();
+app.use(Notify);
+```    
+## 基本用法
+
+```javascript
+export default {
+  mounted() {
+      Notify.text('通知内容', {
+        onClosed() {
+          console.log('close');
+        },
+        onClick: () => {
+          console.log('click');
+        }
+      });
+  }
+}
+```
+## 通知类型
+### 主要通知
+```javascript
+    mounted(){
+      Notify.primary('通知内容');
+    }
+```
+### 成功通知
+```javascript
+    mounted(){
+      Notify.success('通知内容');
+    }
+```
+### 危险通知
+```javascript
+    mounted(){
+      Notify.danger('通知内容');
+    }
+```
+### 警告通知
+```javascript
+    mounted(){
+      Notify.warn('通知内容');
+    }
+```
+## 自定义
+### 自定义样式
+```javascript
+    mounted(){
+      Notify.text(val, {
+        color: '#ad0000',
+        background: '#ffe1e1'
+      });
+    }
+```
+### 自定义时长
+```javascript
+    mounted(){
+      Notify.text(val, {
+        duration: 10000
+      });
+    }
+```
     
-    ## API
-    
-    ### Props
-    
-    | 参数         | 说明                             | 类型   | 默认值           |
-    |--------------|----------------------------------|--------|------------------|
-    | name         | 图标名称或图片链接               | String | -                |
-    | color        | 图标颜色                         | String | -                |
-    | size         | 图标大小，如 '20px' '2em' '2rem' | String | -                |
-    | class-prefix | 类名前缀，用于使用自定义图标     | String | 'nutui-iconfont' |
-    | tag          | HTML 标签                        | String | 'i'              |
+## API
     
-    ### Events
+### Props
     
-    | 事件名 | 说明           | 回调参数     |
-    |--------|----------------|--------------|
-    | click  | 点击图标时触发 | event: Event |
+| 字段       | 说明                                     | 类型          | 默认值 |
+| ---------- | ---------------------------------------- | ------------- | ------ |
+| type       | 提示的信息                               | String        | 空     |
+| message    | 展示文案，支持通过\n换行                 | Boolean       | false  |
+| duration   | 展示时长(ms)，值为 0 时，notify 不会消失 | String        | 空     |
+| color      | 字体颜色                                 | String        | 空     |
+| background | 背景颜色                                 | String        | 空     |
+| className  | 自定义类名                               | String/Number | 1      |
+
+### Events
+
+| 事件名 | 说明           | 回调参数     |
+|--------|----------------|--------------|
+| onClick  | 点击事件回调       | 无       |
+| onClose  | 关闭事件回调       | 无       |
     

src/packages/notify/index.scss

@@ -17,25 +17,25 @@
   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;
-
+  &--base {
+    background: $notify-base-background-color;
+  }
   &--primary {
-    background-color: $notify-primary-background-color;
+    background: $notify-primary-background-color;
   }
 
   &--success {
-    background-color: $notify-success-background-color;
+    background: $notify-success-background-color;
   }
 
   &--danger {
-    background-color: $notify-danger-background-color;
+    background: $notify-danger-background-color;
   }
 
   &--warning {
-    background-color: $notify-warning-background-color;
+    background: $notify-warning-background-color;
   }
 }

src/packages/notify/index.vue

@@ -1,17 +1,8 @@
 <template>
-  <Transition name="toast-fade">
+  <Transition name="toast-fade" @after-leave="onAfterLeave">
     <view
-      :class="[
-        'popup-top',
-        'round',
-        'nut-notify',
-        `nut-notify--${type}`,
-        { className }
-      ]"
-      :style="{
-        bottom: center ? 'auto' : bottom + 'px',
-        'background-color': coverColor
-      }"
+      :class="['popup-top', 'nut-notify', `nut-notify--${type}`, { className }]"
+      :style="{ color: color, background: background }"
       v-show="state.mounted"
       @click="clickCover"
     >
@@ -31,6 +22,7 @@ const { componentName, create } = createComponent('notify');
 
 export default create({
   props: {
+    id: String,
     color: { type: String, default: '' },
     msg: { type: Number, default: '' },
     duration: { type: Number, default: 3000 },
@@ -46,7 +38,10 @@ export default create({
     showPopup: {
       type: Boolean,
       default: false
-    }
+    },
+    onClose: Function,
+    onClick: Function,
+    unmount: Function
   },
 
   setup(props, { slots }) {
@@ -57,6 +52,9 @@ export default create({
     onMounted(() => {
       state.mounted = true;
     });
+    const clickCover = () => {
+      props.onClick && props.onClick();
+    };
     const clearTimer = () => {
       if (timer) {
         clearTimeout(timer);
@@ -87,7 +85,12 @@ export default create({
         }
       }
     );
-    return { state, hide };
+    const onAfterLeave = () => {
+      clearTimer();
+      props.unmount && props.unmount(props.id);
+      props.onClose && props.onClose();
+    };
+    return { state, hide, onAfterLeave, clickCover };
   }
 });
 </script>

src/packages/notify/notify.ts

@@ -2,7 +2,7 @@ import { createVNode, defineComponent, render, App } from 'vue';
 import VueNotify from './index.vue';
 const NotifyConstructor = defineComponent(VueNotify);
 const defaultOptions = {
-  type: 'danger',
+  type: 'base',
   showPopup: false,
   msg: '',
   color: undefined,
@@ -12,12 +12,13 @@ const defaultOptions = {
   onClosed: null,
   onClick: null,
   onOpened: null,
-  textTimer: null
+  textTimer: null,
+  unmount: null
 };
 
 let idsMap: string[] = [];
 let optsMap: any[] = [];
-const clearToast = (id?: string) => {
+const clearNotify = (id?: string) => {
   if (id) {
     const container = document.getElementById(id);
     optsMap = optsMap.filter(item => item.id !== id);
@@ -37,7 +38,7 @@ const clearToast = (id?: string) => {
   }
 };
 
-const updateToast = opts => {
+const updateNotify = opts => {
   const container = document.getElementById(opts.id);
   if (container) {
     const currentOpt = optsMap.find(item => item.id === opts.id);
@@ -52,14 +53,13 @@ const updateToast = opts => {
   }
 };
 
-const mountToast = opts => {
-  opts.unmount = clearToast;
+const mountNotify = opts => {
+  opts.unmount = clearNotify;
   let _id;
-  // 如果是更新已有的toast
   if (opts.id) {
     _id = opts.id;
     if (idsMap.find(item => item === opts.id)) {
-      return updateToast(opts);
+      return updateNotify(opts);
     }
   } else {
     _id = new Date().getTime() + '';
@@ -91,31 +91,29 @@ const errorMsg = msg => {
 export const Notify = {
   text(msg, obj = {}) {
     errorMsg(msg);
-    return mountToast({ ...obj, msg });
+    return mountNotify({ ...obj, msg });
   },
   primary(msg, obj = {}) {
     errorMsg(msg);
-    return mountToast({ ...obj, msg, type: 'primary' });
+    return mountNotify({ ...obj, msg, type: 'primary' });
   },
   success(msg, obj = {}) {
     errorMsg(msg);
-    return mountToast({ ...obj, msg, type: 'success' });
+    return mountNotify({ ...obj, msg, type: 'success' });
   },
   danger(msg, obj = {}) {
     errorMsg(msg);
-    return mountToast({ ...obj, msg, type: 'danger' });
+    return mountNotify({ ...obj, msg, type: 'danger' });
   },
   warn(msg, obj = {}) {
     errorMsg(msg);
-    return mountToast({ ...obj, msg, type: 'warning' });
+    return mountNotify({ ...obj, msg, type: 'warning' });
   },
   hide() {
-    clearToast();
+    clearNotify();
   }
 };
 
-// export default Toast;
-
 export default {
   install(app: App): void {
     app.config.globalProperties.$notify = Notify;

src/styles/variables.scss

@@ -153,9 +153,30 @@ $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;
+$notify-font-size: 28px;
+
+$notify-base-background-color: linear-gradient(
+  135deg,
+  rgba(250, 44, 25, 1) 0%,
+  rgba(250, 63, 25, 1) 45%,
+  rgba(250, 89, 25, 1) 83%,
+  rgba(250, 100, 25, 1) 100%
+);
+$notify-primary-background-color: linear-gradient(
+  315deg,
+  rgba(73, 143, 242, 1) 0%,
+  rgba(73, 101, 242, 1) 100%
+);
+$notify-success-background-color: linear-gradient(
+  135deg,
+  rgba(38, 191, 38, 1) 0%,
+  rgba(39, 197, 48, 1) 45%,
+  rgba(40, 207, 63, 1) 83%,
+  rgba(41, 212, 70, 1) 100%
+);
+$notify-danger-background-color: rgba(250, 50, 25, 1);
+$notify-warning-background-color: linear-gradient(
+  135deg,
+  rgba(255, 93, 13, 1) 0%,
+  rgba(255, 154, 13, 1) 100%
+);