docs: notify

src/packages/notify/demo.vue

@@ -65,7 +65,7 @@ import { Notify } from './notify';
 const { createDemo } = createComponent('notify');
 export default createDemo({
   setup() {
-    const baseNotify = msg => {
+    const baseNotify = (msg: string) => {
       Notify.text(msg, {
         onClose: () => {
           console.log('close');
@@ -75,22 +75,22 @@ export default createDemo({
         }
       });
     };
-    const primaryNotify = msg => {
+    const primaryNotify = (msg: string) => {
       Notify.primary(msg);
     };
-    const successNotify = msg => {
+    const successNotify = (msg: string) => {
       Notify.success(msg);
     };
-    const errorNotify = msg => {
+    const errorNotify = (msg: string) => {
       Notify.danger(msg);
     };
-    const warningNotify = msg => {
+    const warningNotify = (msg: string) => {
       Notify.warn(msg);
     };
-    const cusBgNotify = msg => {
+    const cusBgNotify = (msg: string) => {
       Notify.text(msg, { color: '#ad0000', background: '#ffe1e1' });
     };
-    const timeNotify = msg => {
+    const timeNotify = (msg: string) => {
       Notify.text(msg, { duration: 10000 });
     };
     return {
@@ -106,7 +106,4 @@ export default createDemo({
 });
 </script>
 
-<style lang="scss" scoped>
-.nut-temp {
-}
-</style>
+<style lang="scss" scoped></style>

src/packages/notify/doc.md

@@ -83,12 +83,12 @@ export default {
 | duration   | 展示时长(ms)，值为 0 时，notify 不会消失 | String        | 空     |
 | color      | 字体颜色                                 | String        | 空     |
 | background | 背景颜色                                 | String        | 空     |
-| className  | 自定义类名                               | String/Number | 1      |
+| class-name  | 自定义类名                               | String/Number | 1      |
 
 ### Events
 
 | 事件名 | 说明           | 回调参数     |
 |--------|----------------|--------------|
-| onClick  | 点击事件回调       | 无       |
-| onClose  | 关闭事件回调       | 无       |
+| on-click  | 点击事件回调       | 无       |
+| on-close  | 关闭事件回调       | 无       |
     

src/packages/notify/index.scss

@@ -1,4 +1,3 @@
-@import '../../styles/variables.scss';
 .popup-top {
   position: fixed;
   top: 0;

src/packages/notify/index.vue

@@ -12,7 +12,12 @@
       <template v-else>{{ msg }}</template>
     </view>
   </Transition>
-  <!-- </view> -->
+  <!-- <nut-popup v-model:show="state.mounted" position="top" :style="{ color: color, background: background }" :class="['popup-top', 'nut-notify', `nut-notify--${type}`, { className }]" overlay="false">
+    <template v-if="$slots.default">
+      <slot></slot>
+    </template>
+    <template v-else>{{ msg }}</template>
+  </nut-popup> -->
 </template>
 <script lang="ts">
 import { toRefs, reactive, onMounted, watch } from 'vue';
@@ -21,6 +26,9 @@ import Popup from '@/packages/popup/index.vue';
 const { componentName, create } = createComponent('notify');
 
 export default create({
+  components: {
+    [Popup.name]: Popup
+  },
   props: {
     id: String,
     color: { type: String, default: '' },
@@ -45,7 +53,7 @@ export default create({
   },
 
   setup(props, { slots }) {
-    let timer;
+    let timer: null | number = null;
     const state = reactive({
       mounted: false
     });

src/packages/notify/notify.ts

@@ -47,7 +47,7 @@ const updateNotify = (opts: any) => {
     } else {
       opts = { ...defaultOptions, ...opts };
     }
-    const instance: any = createVNode(NotifyConstructor, opts);
+    const instance: any = createVNode(VueNotify, opts);
     render(instance, container);
     return instance.component.ctx;
   }
@@ -68,15 +68,13 @@ const mountNotify = (opts: any) => {
   opts.id = _id;
   idsMap.push(opts.id);
   optsMap.push(opts);
-  const container = document.createElement('div');
+  const container = document.createElement('view');
   container.id = opts.id;
   const instance: any = createVNode(NotifyConstructor, opts);
   render(instance, container);
   document.body.appendChild(container);
-  console.log(instance.component);
   setTimeout(() => {
     instance.showPopup = true;
-    console.log(instance.component, '====');
   }, 0);
   return instance.component.ctx;
 };

src/packages/popup/index.vue

@@ -43,6 +43,7 @@ import {
 } from 'vue';
 import { useLockScroll } from './use-lock-scroll';
 import { overlayProps } from './../overlay/index.vue';
+import overlay from '@/packages/overlay/index.vue';
 import { createComponent } from '@/utils/create';
 const { componentName, create } = createComponent('popup');
 
@@ -104,6 +105,7 @@ const popupProps = {
   }
 };
 export default create({
+  children: [overlay],
   props: {
     ...overlayProps,
     ...popupProps