feat(notify): 增加组件模板调用方式 (#1220)

* fix: countup优化滚动逻辑

* fix: collapse 无法动态更新问题修复

* fix: 解决H5侧动态加载问题

* docs: 文档增加调试功能(Barrage、Signature、CountUp、TextArea、Collapse)

* feat: 折叠面板 collapse 单元测试

* feat: countUp 单元测试

* feat: barrage 单元测试

* fix: 签名组件单元测试

* feat: textarea 单元测试

* feat: collapse 标题多行展示,无内容不下拉,图标位置配置

* feat: textarea 自动撑开，collapse 组件能力

* fix: collapse 单元测试优化

* fix: textarea 单元测试优化

* fix: 修改input参数,maxNum 改为 maxLength,文档修改等

* fix: maxlength 值

* fix: textarea 自适应

* fix: textarea rows

* upd: notify 增加组件调用方式

* fix: demo 修改

Co-authored-by: richard1015 <51844712@qq.com>

src/packages/__VUE/notify/demo.vue

@@ -16,12 +16,19 @@
       <nut-cell is-Link @click="timeNotify('自定义时长')"> 自定义时长 </nut-cell>
       <nut-cell is-Link @click="positionNotify('自定义位置')"> 自定义位置 </nut-cell>
     </nut-cell-group>
+    <nut-cell-group title="组件调用">
+      <nut-cell is-Link @click="showNotify">组件调用</nut-cell>
+      <nut-notify v-model:visible="show">
+        <span>通知内容</span>
+      </nut-notify>
+    </nut-cell-group>
   </div>
 </template>
 
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
 import { Notify } from '../../nutui.vue';
+import { ref } from 'vue';
 const { createDemo } = createComponent('notify');
 export default createDemo({
   setup() {
@@ -36,7 +43,7 @@ export default createDemo({
       });
     };
     const primaryNotify = (msg: string) => {
-      Notify.primary(msg);
+      Notify.primary(msg, { duration: 10000 });
     };
     const successNotify = (msg: string) => {
       Notify.success(msg);
@@ -51,11 +58,18 @@ export default createDemo({
       Notify.text(msg, { color: '#ad0000', background: '#ffe1e1' });
     };
     const timeNotify = (msg: string) => {
-      Notify.text(msg, { duration: 10000 });
+      Notify.text(msg, { duration: 1000 });
     };
     const positionNotify = (msg: string) => {
       Notify.text(msg, { position: 'bottom' });
     };
+    const show = ref(false);
+    const showNotify = () => {
+      show.value = true;
+      setTimeout(() => {
+        show.value = false;
+      }, 2000);
+    };
     return {
       baseNotify,
       primaryNotify,
@@ -64,7 +78,9 @@ export default createDemo({
       warningNotify,
       cusBgNotify,
       timeNotify,
-      positionNotify
+      positionNotify,
+      show,
+      showNotify
     };
   }
 });

src/packages/__VUE/notify/index.scss

@@ -1,4 +1,5 @@
 .popup-top {
+  display: flex;
   position: fixed;
   top: 0;
   left: 0;
@@ -30,6 +31,7 @@
   opacity: 0;
 }
 .nut-notify {
+  width: 100%;
   box-sizing: border-box;
   padding: $notify-padding;
   color: $notify-text-color;

src/packages/__VUE/notify/index.ts

@@ -1,8 +1,9 @@
-import { createVNode, defineComponent, render, App } from 'vue';
+import { createVNode, render, h, onMounted } from 'vue';
 import Notify from './index.vue';
 const defaultOptions = {
   type: 'base',
-  showPopup: false,
+  showPopup: true,
+  visible: true,
   msg: '',
   color: undefined,
   background: undefined,
@@ -67,15 +68,40 @@ const mountNotify = (opts: any) => {
   opts.id = _id;
   idsMap.push(opts.id);
   optsMap.push(opts);
-  const container = document.createElement('view');
-  container.id = opts.id;
-  const instance: any = createVNode(Notify, opts);
-  render(instance, container);
-  document.body.appendChild(container);
-  setTimeout(() => {
-    instance.showPopup = true;
-  }, 0);
-  return instance.component.ctx;
+  const root = document.createElement('view');
+  root.id = 'notify-' + opts.id;
+  const Wrapper = {
+    setup() {
+      // opts.onUpdate = (val: boolean) => {
+      //   console.log(val);
+      //   if (val == false) {
+      //     document.body.removeChild(root);
+      //   }
+      // };
+      opts.teleport = `#notify-${opts.id}`;
+      onMounted(() => {
+        setTimeout(() => {
+          document.body.removeChild(root);
+        }, opts.duration);
+      });
+      return () => {
+        return h(Notify, opts);
+      };
+    }
+  };
+  const instance: any = createVNode(Wrapper);
+  document.body.appendChild(root);
+  render(instance, root);
+  // const container = document.createElement('view');
+  // container.id = opts.id;
+  // const instance: any = createVNode(Notify, opts);
+  // render(instance, container);
+  // console.log(container);
+  // teleport.appendChild(container);
+  // setTimeout(() => {
+  //   instance.visible = true;
+  // }, 0);
+  // return instance.component.ctx;
 };
 
 const errorMsg = (msg: string) => {
@@ -109,7 +135,8 @@ export const NotifyFunction = {
   hide() {
     clearNotify();
   },
-  install(app: App): void {
+  install(app: any): void {
+    app.use(Notify);
     app.config.globalProperties.$notify = NotifyFunction;
   }
 };

src/packages/__VUE/notify/index.vue

@@ -1,27 +1,20 @@
 <template>
-  <Transition name="toast-fade" @after-leave="onAfterLeave">
-    <view
-      :class="[`popup-${position}`, 'nut-notify', `nut-notify--${type}`, [className]]"
+  <nut-popup v-model:visible="showPopup" :position="position" :overlay="false">
+    <div
+      :class="['nut-notify', `nut-notify--${type}`, className]"
       :style="{ color: color, background: background }"
-      v-show="state.mounted"
       @click="clickCover"
     >
       <template v-if="$slots.default">
         <slot></slot>
       </template>
       <template v-else>{{ msg }}</template>
-    </view>
-  </Transition>
-  <!-- <nut-popup v-model:visible="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> -->
+    </div>
+  </nut-popup>
 </template>
 <script lang="ts">
-import { toRefs, reactive, onMounted, watch } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { toRefs, reactive, onMounted, watch, ref } from 'vue';
+import { createComponent } from '../../utils/create';
 import Popup from '../popup/index.vue';
 const { componentName, create } = createComponent('notify');
 
@@ -47,6 +40,10 @@ export default create({
       type: Boolean,
       default: false
     },
+    // visible: {
+    //   type: Boolean,
+    //   default: false
+    // },
     position: {
       type: String,
       default: 'top'
@@ -62,9 +59,11 @@ export default create({
       mounted: false
     });
     onMounted(() => {
-      state.mounted = true;
+      // state.mounted = true;
     });
 
+    const visible = ref(false);
+
     const clickCover = () => {
       props.onClick && props.onClick();
     };
@@ -98,12 +97,19 @@ export default create({
         }
       }
     );
+
+    // watch(
+    //   () => props.visible,
+    //   (val, oldv) => {
+    //     state.mounted = val;
+    //   }
+    // );
     const onAfterLeave = () => {
       clearTimer();
       props.unmount && props.unmount(props.id);
       props.onClose && props.onClose();
     };
-    return { state, hide, onAfterLeave, clickCover };
+    return { state, hide, onAfterLeave, clickCover, visible };
   }
 });
 </script>