fix: docs, 组件问题处理

src/packages/__VUE/notify/index.taro.vue

@@ -1,5 +1,5 @@
 <template>
-  <nut-popup v-model:visible="isShowPopup" :position="position" :overlay="false" :teleportDisable="teleportDisable">
+  <nut-popup v-model:visible="isShowPopup" :position="position" :overlay="false">
     <div
       :class="['nut-notify', `nut-notify--${type}`, className]"
       :style="{ color: color, background: background }"
@@ -13,7 +13,7 @@
   </nut-popup>
 </template>
 <script lang="ts">
-import { ref, watch } from 'vue';
+import { ref, watch, onUnmounted } from 'vue';
 import { createComponent } from '../../utils/create';
 import Popup from '../popup/index.vue';
 const { create } = createComponent('notify');
@@ -44,10 +44,6 @@ export default create({
       type: String,
       default: 'top'
     },
-    teleportDisable: {
-      type: Boolean,
-      default: true
-    },
     onClose: Function,
     onClick: Function,
     unmount: Function
@@ -73,11 +69,10 @@ export default create({
     // watch show popup
     const isShowPopup = ref<boolean>(false);
 
-    const unWatch = watch(
+    watch(
       () => props.visible,
       (newVal: boolean) => {
         isShowPopup.value = props.visible;
-
         const DURATION: number = props.duration;
         if (newVal && DURATION) {
           timer = setTimeout(() => {
@@ -88,14 +83,11 @@ export default create({
       { immediate: true }
     );
 
-    const onAfterLeave = () => {
+    onUnmounted(() => {
       clearTimer();
-      unWatch && unWatch();
-      props.unmount && props.unmount(props.id);
-      props.onClose && props.onClose();
-    };
+    });
 
-    return { onAfterLeave, clickCover, isShowPopup };
+    return { clickCover, isShowPopup };
   }
 });
 </script>

src/packages/__VUE/signature/demo.vue

@@ -3,17 +3,18 @@
     <h2>{{ translate('basic') }}</h2>
     <div>
       <nut-signature @confirm="confirm" @clear="clear" custom-class="test" @start="start"></nut-signature>
-      <p class="demo-tips demo1">{{ translate('tips') }}</p>
+      <image :src="demoSignUrl" class="demoSignUrl" v-if="demoSignUrl" />
     </div>
     <h2>{{ translate('title') }}</h2>
     <div>
       <nut-signature :lineWidth="lineWidth" :strokeStyle="strokeStyle" @end="end"></nut-signature>
+      <image :src="demoSignUrl2" class="demoSignUrl" v-if="demoSignUrl2" />
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { reactive } from 'vue';
+import { reactive, ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('signature');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -34,18 +35,36 @@ export default createDemo({
   props: {},
   setup() {
     initTranslate();
+    const demoSignUrl = ref('');
+    const demoSignUrl2 = ref('');
     const state = reactive({
       lineWidth: 4,
       strokeStyle: 'green'
     });
 
+    const clear = () => {
+      demoSignUrl.value = '';
+      console.log('清除事件');
+    };
+    const clear2 = () => {
+      demoSignUrl2.value = '';
+      console.log('清除事件');
+    };
     const confirm = (canvas: any, data: any) => {
-      let img = document.createElement('img');
-      img.src = data;
-      (document.querySelector('.demo1') as any).appendChild(img);
+      if (data === '') {
+        console.log(canvas);
+        return false;
+      }
+      demoSignUrl.value = data;
+      console.log('图片地址', canvas, data);
     };
-    const clear = () => {
-      console.log('清除');
+    const confirm2 = (canvas: any, data: any) => {
+      if (data === '') {
+        console.log(canvas);
+        return false;
+      }
+      demoSignUrl2.value = data;
+      console.log('图片地址', canvas, data);
     };
     const start = () => {
       console.log('签名开始');
@@ -53,7 +72,7 @@ export default createDemo({
     const end = () => {
       console.log('签名结束');
     };
-    return { ...state, confirm, clear, translate, start, end };
+    return { ...state, confirm, clear, translate, demoSignUrl, demoSignUrl2, confirm2, clear2, start, end };
   }
 });
 </script>

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

@@ -27,47 +27,29 @@ app.use(Signature);
     @confirm="confirm" 
     @clear="clear"
   ></nut-signature>
-  <p class="demo-tips demo">Tips: click the confirm button, and the signature image is displayed below</p>
+  <img :src="demoSignUrl" class="demoSignUrl" v-if="demoSignUrl" />
 </template>
 <script>
 export default {
     props: {},
     setup() {
-        const confirm = (canvas, data) => {
-            let img = document.createElement('img');
-            img.src = data;
-            document.querySelector('.demo').appendChild(img);
-        };
-        const clear = () => {
-            let img = document.querySelector('.demo img'); 
-            if (img) {
-                img.remove();
-            }
+      const demoSignUrl = ref('');
+      const confirm = (canvas, data) => {
+        if (data === '') {
+          console.log(canvas);
+          return false;
         }
-        return { confirm, clear };
+        demoSignUrl.value = data;
+        console.log('The map`s address', canvas, data);
+      };
+      const clear = () => {
+        demoSignUrl.value = '';
+        console.log('clear event');
+      }
+      return { confirm, clear, demoSignUrl };
     }
 }
 </script>
-<script>
-import { reactive } from 'vue';
-export default {
-  props: {},
-  setup() {
-    const confirm = (canvas, data) => {
-        let img = document.createElement('img');
-        img.src = data;
-        document.querySelector('.demo').appendChild(img);
-    };
-    const clear = () => {
-        let img = document.querySelector('.demo img'); 
-        if (img) {
-            img.remove();
-        }
-    }
-    return { confirm, clear };
-  }
-};
-</script>
 ```
 :::
 ### Modify color and signature thickness
@@ -82,7 +64,7 @@ export default {
     @confirm="confirm" 
     @clear="clear"
   ></nut-signature>
-  <p class="demo-tips demo">Tips: click the confirm button, and the signature image is displayed below</p>
+  <img :src="demoSignUrl" class="demoSignUrl" v-if="demoSignUrl" />
 </template>
 <script>
 import { reactive } from 'vue';
@@ -93,18 +75,20 @@ export default {
       lineWidth: 4,
       strokeStyle: 'green'
     });
+    const demoSignUrl = ref('');
     const confirm = (canvas, data) => {
-        let img = document.createElement('img');
-        img.src = data;
-        document.querySelector('.demo').appendChild(img);
+      if (data === '') {
+        console.log(canvas);
+        return false;
+      }
+      demoSignUrl.value = data;
+      console.log('The map`s address', canvas, data);
     };
     const clear = () => {
-        let img = document.querySelector('.demo img'); 
-        if (img) {
-            img.remove();
-        }
+      demoSignUrl.value = '';
+      console.log('clear event');
     }
-    return { ...state, confirm, clear };
+    return { ...state, demoSignUrl, confirm, clear };
   }
 };
 </script>

src/packages/__VUE/signature/doc.md

@@ -24,24 +24,26 @@ app.use(Signature);
     @confirm="confirm" 
     @clear="clear"
   ></nut-signature>
-  <p class="demo-tips demo">Tips: 点击确认按钮,下方显示签名图片</p>
+  <img :src="demoSignUrl" class="demoSignUrl" v-if="demoSignUrl" />
 </template>
 <script>
 export default {
     props: {},
     setup() {
-        const confirm = (canvas, data) => {
-            let img = document.createElement('img');
-            img.src = data;
-            document.querySelector('.demo').appendChild(img);
-        };
-        const clear = () => {
-            let img = document.querySelector('.demo img'); 
-            if (img) {
-                img.remove();
-            }
+      const demoSignUrl = ref('');
+      const confirm = (canvas, data) => {
+        if (data === '') {
+          console.log(canvas);
+          return false;
         }
-        return { confirm, clear };
+        demoSignUrl.value = data;
+        console.log('图片地址', canvas, data);
+      };
+      const clear = () => {
+        demoSignUrl.value = '';
+        console.log('清除事件');
+      }
+      return { confirm, clear, demoSignUrl };
     }
 }
 </script>
@@ -59,7 +61,7 @@ export default {
     @confirm="confirm" 
     @clear="clear"
   ></nut-signature>
-  <p class="demo-tips demo">Tips: 点击确认按钮,下方显示签名图片</p>
+  <img :src="demoSignUrl" class="demoSignUrl" v-if="demoSignUrl" />
 </template>
 <script>
 import { reactive } from 'vue';
@@ -70,18 +72,20 @@ export default {
       lineWidth: 4,
       strokeStyle: 'green'
     });
+    const demoSignUrl = ref('');
     const confirm = (canvas, data) => {
-        let img = document.createElement('img');
-        img.src = data;
-        document.querySelector('.demo').appendChild(img);
+      if (data === '') {
+        console.log(canvas);
+        return false;
+      }
+      demoSignUrl.value = data;
+      console.log('图片地址', canvas, data);
     };
     const clear = () => {
-        let img = document.querySelector('.demo img'); 
-        if (img) {
-            img.remove();
-        }
+      demoSignUrl.value = '';
+      console.log('清除事件');
     }
-    return { ...state, confirm, clear };
+    return { ...state, demoSignUrl, confirm, clear };
   }
 };
 </script>

src/packages/__VUE/signature/doc.taro.md

@@ -24,24 +24,26 @@ app.use(Signature);
     @confirm="confirm" 
     @clear="clear"
   ></nut-signature>
-  <p class="demo-tips demo">Tips: 点击确认按钮,下方显示签名图片</p>
+  <img :src="demoSignUrl" class="demoSignUrl" v-if="demoSignUrl" />
 </template>
 <script>
 export default {
     props: {},
     setup() {
-        const confirm = (canvas, data) => {
-            let img = document.createElement('img');
-            img.src = data;
-            document.querySelector('.demo').appendChild(img);
-        };
-        const clear = () => {
-            let img = document.querySelector('.demo img'); 
-            if (img) {
-                img.remove();
-            }
+      const demoSignUrl = ref('');
+      const confirm = (canvas, data) => {
+        if (data === '') {
+          console.log(canvas);
+          return false;
         }
-        return { confirm, clear };
+        demoSignUrl.value = data;
+        console.log('图片地址', canvas, data);
+      };
+      const clear = () => {
+        demoSignUrl.value = '';
+        console.log('清除事件');
+      }
+      return { confirm, clear, demoSignUrl };
     }
 }
 </script>
@@ -52,44 +54,40 @@ export default {
 ### 修改颜色和签字粗细
 
 ```html
-<div class="demo">
-  <nut-signature
-    :lineWidth="lineWidth"
+<template>
+  <nut-signature  
+    :lineWidth="lineWidth" 
     :strokeStyle="strokeStyle"
-    @confirm="confirm"
+    @confirm="confirm" 
     @clear="clear"
   ></nut-signature>
-</div>
+  <img :src="demoSignUrl" class="demoSignUrl" v-if="demoSignUrl" />
+</template>
 <script>
+import { reactive } from 'vue';
 export default {
+  props: {},
   setup() {
     const state = reactive({
       lineWidth: 4,
-      strokeStyle: 'green',
-      testimg: ''
+      strokeStyle: 'green'
     });
+    const demoSignUrl = ref('');
+    const confirm = (canvas, data) => {
+      if (data === '') {
+        console.log(canvas);
+        return false;
+      }
+      demoSignUrl.value = data;
+      console.log('图片地址', canvas, data);
+    };
     const clear = () => {
+      demoSignUrl.value = '';
       console.log('清除事件');
-    };
-    const confirm = (data: any) => {
-      console.log('图片地址', data);
-      Taro.saveImageToPhotosAlbum({
-        filePath: `${data}`,
-        success(res) {
-          Taro.showToast({
-            title: '保存成功'
-          });
-        },
-        fail(err) {
-          Taro.showToast({
-            title: '保存失败'
-          });
-        }
-      });
-    };
-    return { ...state, confirm, clear };
+    }
+    return { ...state, demoSignUrl, confirm, clear };
   }
-}
+};
 </script>
 ```