fix(Signature): 签名组件taro环境适配 (#1797)

src/packages/__VUE/signature/index.scss

@@ -1,12 +1,15 @@
 .nut-signature {
   .nut-signature-inner {
-    height: 10rem;
+    // height: 10rem;
     margin-bottom: 1rem;
     border: 1px solid #dadada;
     display: flex;
     justify-content: center;
     align-items: center;
   }
+  .spcanvas_WEAPP {
+    height: 10rem;
+  }
 
   .nut-signature-btn {
     margin-right: 15px;

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

@@ -1,7 +1,8 @@
 <template>
   <div :class="classes">
-    <div class="nut-signature-inner">
+    <div :class="['nut-signature-inner', taroEnv === 'WEAPP' ? 'spcanvas_WEAPP' : '']">
       <canvas
+        ref="spcanvas"
         class="spcanvas"
         id="spcanvas"
         canvasId="spcanvas"
@@ -19,7 +20,7 @@
   </div>
 </template>
 <script lang="ts">
-import Taro, { eventCenter, getCurrentInstance as getCurrentInstanceTaro } from '@tarojs/taro';
+import Taro from '@tarojs/taro';
 import { ref, reactive, onMounted, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create, translate } = createComponent('signature');
@@ -58,6 +59,8 @@ export default create({
         [`${props.customClass}`]: props.customClass
       };
     });
+    const spcanvas: any = ref<HTMLElement | null>(null);
+
     const state: any = reactive({
       canvas: null,
       canvasHeight: 0,
@@ -67,6 +70,9 @@ export default create({
 
     const startEventHandler = (event: MouseEvent) => {
       event.preventDefault();
+      if (!state.ctx) {
+        return false;
+      }
       emit('start');
       state.ctx.beginPath();
       state.ctx.lineWidth = props.lineWidth;
@@ -75,13 +81,22 @@ export default create({
 
     const moveEventHandler = (event) => {
       event.preventDefault();
-
+      if (!state.ctx) {
+        return false;
+      }
       let evt = event.changedTouches[0];
       emit('signing', evt);
-      let mouseX = evt.x;
-      let mouseY = evt.y;
-      state.ctx.lineTo(mouseX, mouseY);
-      state.ctx.stroke();
+      let mouseX = evt.x || evt.clientX;
+      let mouseY = evt.y || evt.clientY;
+
+      if (Taro.getEnv() === 'WEB') {
+        let coverPos = spcanvas.value.getBoundingClientRect();
+        mouseX = evt.clientX - coverPos.left;
+        mouseY = evt.clientY - coverPos.top;
+      }
+
+      state.ctx?.lineTo(mouseX, mouseY);
+      state.ctx?.stroke();
     };
 
     const endEventHandler = (event) => {
@@ -115,39 +130,71 @@ export default create({
         .exec(async (res) => {
           Taro.canvasToTempFilePath({
             canvas: res[0].node,
-            fileType: props.type
-          })
-            .then((res) => {
-              emit('confirm', res.tempFilePath);
-            })
-            .catch((e) => {
-              emit('confirm', e);
-            });
+            canvasId: 'spcanvas',
+            fileType: props.type,
+            success: function (result) {
+              emit('confirm', state.canvas, result.tempFilePath);
+            },
+            fail: function (result) {
+              emit('confirm', result);
+            }
+          });
+
+          // Taro.canvasToTempFilePath({
+          //   canvas: res[0].node,
+          //   canvasId: 'spcanvas',
+          //   fileType: props.type
+          // })
+          //   .then((res) => {
+          //     emit('confirm', res.tempFilePath);
+          //   })
+          //   .catch((e) => {
+          //     emit('confirm', e);
+          //   });
         });
     };
 
     onMounted(() => {
-      eventCenter.once((getCurrentInstanceTaro() as any).router.onReady, () => {
-        Taro.createSelectorQuery()
-          .select('#spcanvas')
-          .fields(
-            {
-              node: true,
-              size: true
-            },
-            function (res) {
-              const canvas = res.node;
-              const ctx = canvas.getContext('2d');
-              state.canvas = canvas;
-              state.ctx = ctx;
-              state.canvasWidth = res.width;
-              state.canvasHeight = res.height;
+      Taro.nextTick(() => {
+        setTimeout(() => {
+          if (Taro.getEnv() === 'WEAPP') {
+            Taro.createSelectorQuery()
+              .select('#spcanvas')
+              .fields(
+                {
+                  node: true,
+                  size: true
+                },
+                function (res) {
+                  const canvas = res.node;
+                  const ctx = canvas.getContext('2d');
+                  state.canvas = canvas;
+                  state.ctx = ctx;
+                  state.canvasWidth = res.width;
+                  state.canvasHeight = res.height;
+                }
+              )
+              .exec();
+          } else {
+            console.log(document.getElementById('spcanvas')?.tagName);
+            const canvasDom: HTMLElement | null = document.getElementById('spcanvas');
+            let canvas: HTMLCanvasElement = canvasDom as HTMLCanvasElement;
+            if (canvasDom?.tagName !== 'CANVAS') {
+              canvas = canvasDom?.getElementsByTagName('canvas')[0] as HTMLCanvasElement;
             }
-          )
-          .exec();
+            // const canvas: any = document.getElementById('spcanvas')?.getElementsByTagName('canvas')[0];
+            const ctx = canvas.getContext('2d');
+            state.canvas = canvas;
+            state.ctx = ctx;
+            state.canvasWidth = canvas.width;
+            state.canvasHeight = canvas.height;
+          }
+        }, 1000);
       });
     });
     return {
+      taroEnv: Taro.getEnv(),
+      spcanvas,
       confirm,
       clear,
       classes,

src/packages/__VUE/signature/index.vue

@@ -87,7 +87,7 @@ export default create({
       canvas.value.addEventListener(state.events[3], leaveEventHandler, false);
     };
 
-    const moveEventHandler = (event) => {
+    const moveEventHandler = (event: { preventDefault: () => void; touches: any[] }) => {
       event.preventDefault();
 
       let evt = state.isSupportTouch ? event.touches[0] : event;
@@ -100,13 +100,13 @@ export default create({
       state.ctx.stroke();
     };
 
-    const endEventHandler = (event) => {
+    const endEventHandler = (event: { preventDefault: () => void }) => {
       event.preventDefault();
       emit('end');
       canvas.value.removeEventListener(state.events[1], moveEventHandler, false);
       canvas.value.removeEventListener(state.events[2], endEventHandler, false);
     };
-    const leaveEventHandler = (event) => {
+    const leaveEventHandler = (event: { preventDefault: () => void }) => {
       event.preventDefault();
       canvas.value.removeEventListener(state.events[1], moveEventHandler, false);
       canvas.value.removeEventListener(state.events[2], endEventHandler, false);
@@ -122,7 +122,7 @@ export default create({
       onSave(canvas.value);
     };
 
-    const onSave = (canvas) => {
+    const onSave = (canvas: { toDataURL: (arg0: string, arg1?: number | undefined) => any }) => {
       let dataurl;
       switch (props.type) {
         case 'png':

src/sites/mobile-taro/vue/src/business/pages/signature/index.vue

@@ -27,8 +27,8 @@ export default {
     const clear = () => {
       console.log('清除事件');
     };
-    const confirm = (data: any) => {
-      console.log('图片地址', data);
+    const confirm = (canvas, data: any) => {
+      console.log('图片地址', canvas, data);
       Taro.saveImageToPhotosAlbum({
         filePath: `${data}`,
         success(res) {
@@ -58,8 +58,7 @@ export default {
 </script>
 
 <style lang="scss">
-.nut-cell,
-.nut-barrage {
+.nut-cell {
   padding: 20px 0;
   height: 120px;
 }