fix(collapse、signature): collapse 渲染卡顿问题、signature 组件增加空值返回 (#2061)

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

@@ -179,13 +179,13 @@ export default create({
     };
     const open = () => {
       proxyData.openExpanded = !proxyData.openExpanded;
-      let time = contentRef.value.childNodes?.length || 1;
-      setTimeout(() => {
-        animation();
-      }, 500 * time);
-      // timer.value = setInterval(() => {
-      // animation();
-      // }, 600);
+      // let time = contentRef.value.childNodes?.length || 1;
+      setTimeout(
+        () => {
+          animation();
+        },
+        init.value ? 500 : 0
+      );
     };
 
     const defaultOpen = () => {
@@ -242,7 +242,9 @@ export default create({
         if (tm && tm.length > 0) {
           let h = tm[0]['height'];
           item1.conHeight = h;
-          // resetHeight(h);
+          setTimeout(() => {
+            init.value && handleOpen();
+          }, 500);
         }
       });
     };
@@ -252,7 +254,9 @@ export default create({
         let ary: any = Array.from(item1.$el.children);
         let h = ary[1].children[0]['offsetHeight'];
         item1.conHeight = h;
-        // resetHeight(h);
+        setTimeout(() => {
+          init.value && handleOpen();
+        }, 500);
       });
     };
     // const prevHeight = ref(0);
@@ -282,7 +286,7 @@ export default create({
         }
       });
     };
-    onMounted(() => {
+    const handleOpen = () => {
       const { name } = props;
       const active = parent && parent.props.active;
       if (typeof active == 'number' || typeof active == 'string') {
@@ -295,6 +299,10 @@ export default create({
           defaultOpen();
         }
       }
+      init.value = false;
+    };
+    const init = ref(true);
+    onMounted(() => {
       // 获取 DOM 元素
       if (Taro.getEnv() === 'WEB') {
         getRefHeight();

src/packages/__VUE/signature/demo.vue

@@ -3,24 +3,25 @@
     <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>
+      <img :src="demoSignUrl" class="demoSignUrl" v-if="demoSignUrl" />
     </div>
     <h2>{{ translate('title') }}</h2>
     <div>
       <nut-signature :lineWidth="lineWidth" :strokeStyle="strokeStyle" @end="end"></nut-signature>
+      <img :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';
 const initTranslate = () =>
   useTranslate({
     'zh-CN': {
-      basic: '基本用法',
+      basic: '基础用法',
       title: '修改颜色和签字粗细',
       tips: 'Tips: 点击确认按钮,下方显示签名图片'
     },
@@ -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>
@@ -67,4 +86,8 @@ export default createDemo({
     color: #666;
   }
 }
+.demoSignUrl {
+  width: 100px;
+  height: 100px;
+}
 </style>

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

@@ -132,5 +132,5 @@ export default {
 |start `v3.2.0` | signature start callback function (refers to the beginning of a stroke) | none
 |signing `v3.2.0`| the callback function being signed (refers to a stroke in progress) | event
 |end `v3.2.0`| signature end callback function (refers to the end of a stroke) | none
-| confirm | Click the confirm button to trigger the event callback function | Canvas and data URI displayed by signature image
+| confirm | Click the confirm button to trigger the event callback function | `canvas and signature image display data URI，<br/>If not drawn, returns a tooltip and an empty data URI`
 | clear | Click the re sign button to trigger the event callback function | -

src/packages/__VUE/signature/doc.md

@@ -111,5 +111,5 @@ export default {
 | start `v3.2.0` | 签名开始回调函数（指某次笔画的开始） | 无
 | signing `v3.2.0` | 正在签名的回调函数（指某次笔画进行中） | event
 | end `v3.2.0` | 签名结束回调函数（指某次笔画的结束）| 无
-| confirm | 点击确认按钮触发事件回调函数 | canvas和签名图片展示的 data URI
+| confirm | 点击确认按钮触发事件回调函数 | canvas和签名图片展示的 data URI，<br>如未绘制，则返回提示信息和空 data URI
 | clear | 点击重签按钮触发事件回调函数 | 无

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

@@ -81,5 +81,5 @@ export default {
 | start `v3.2.0`| 签名开始回调函数（指某次笔画的开始） | 无
 | signing `v3.2.0`| 正在签名的回调函数（指某次笔画进行中） | event
 | end `v3.2.0`| 签名结束回调函数（指某次笔画的结束）| 无
-| confirm | 点击确认按钮触发事件回调函数 | data URI
+| confirm | 点击确认按钮触发事件回调函数 | canvas和签名图片展示的 data URI，<br>如未绘制，则返回提示信息和空 data URI
 | clear | 点击重签按钮触发事件回调函数 | 无

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

@@ -78,12 +78,13 @@ export default create({
       state.ctx.lineWidth = props.lineWidth;
       state.ctx.strokeStyle = props.strokeStyle;
     };
-
+    const isDraw = ref(false);
     const moveEventHandler = (event: { preventDefault: () => void; changedTouches: any[] }) => {
       event.preventDefault();
       if (!state.ctx) {
         return false;
       }
+      isDraw.value = true;
       let evt = event.changedTouches[0];
       emit('signing', evt);
       let mouseX = evt.x || evt.clientX;
@@ -114,6 +115,7 @@ export default create({
       state.ctx.closePath();
 
       emit('clear');
+      isDraw.value = false;
     };
 
     const confirm = () => {
@@ -136,7 +138,10 @@ export default create({
             canvasId: 'spcanvas',
             fileType: props.type,
             success: function (result) {
-              emit('confirm', state.canvas, result.tempFilePath);
+              const _canvas = !isDraw.value ? '请绘制签名' : state.canvas;
+              const _filePath = !isDraw.value ? '' : result.tempFilePath;
+              emit('confirm', _canvas, _filePath);
+              // emit('confirm', state.canvas, result.tempFilePath);
             },
             fail: function (result) {
               emit('confirm', result);

src/packages/__VUE/signature/index.vue

@@ -121,7 +121,15 @@ export default create({
     const confirm = () => {
       onSave(canvas.value);
     };
-
+    const isCanvasBlank = (canvas: any) => {
+      if (!canvas) {
+        return true;
+      }
+      var blank: any = document.createElement('canvas');
+      blank.width = canvas.width;
+      blank.height = canvas.height;
+      return canvas?.toDataURL() == blank.toDataURL();
+    };
     const onSave = (canvas: { toDataURL: (arg0: string, arg1?: number | undefined) => any }) => {
       let dataurl;
       switch (props.type) {
@@ -132,8 +140,12 @@ export default create({
           dataurl = canvas.toDataURL('image/jpeg', 0.8);
           break;
       }
+      const _canvas = isCanvasBlank(canvas) ? '请绘制签名' : canvas;
+      const _filePath = isCanvasBlank(canvas) ? '' : dataurl;
       clear();
-      emit('confirm', canvas, dataurl);
+      emit('confirm', _canvas, _filePath);
+      // clear();
+      // emit('confirm', canvas, dataurl);
     };
 
     onMounted(() => {