feat(signature): 组件增加签名开始、结束、进行中回调函数 (jd-opensource#1520)

* 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 修改

* feat: 新增collapse组件自定义内容（不折叠）功能

* fix: notify 单元测试优化

* feat: searchbar 组件能力补充

* feat: collapse,layout 组件国际化

* upd: countup、barrage、signature、Skeleton组件国际化

* fix: demo及文档修改，组件优化

* feat: textarea 增加autofocus、disabled等属性，增加点击区域事件

* fix: 解决 flexwrap 问题

* fix: 文档修改

* fix: 优化

* fix: collaspe 数据更新支持外部调用

* fix: demo

* feat: 修复折叠面板手风琴模式

* fix: 修复notify标签式展示报错问题及class类名问题

* fix: 解决签名组件生产环境下 getContext 报错问题

* fix: 适配textarea小程序自适应高度功能

* fix: 折叠面板优化

* feat: 组件支持暗黑模式

* feat(signature): signature 组件增加签名开始,结束,进行中回调函数

* docs: 文档修改

Co-authored-by: richard1015 <[email protected]>

src/packages/__VUE/signature/demo.vue

@@ -2,12 +2,12 @@
   <div class="demo">
     <h2>{{ translate('basic') }}</h2>
     <div>
-      <nut-signature @confirm="confirm" @clear="clear" custom-class="test"></nut-signature>
+      <nut-signature @confirm="confirm" @clear="clear" custom-class="test" @start="start"></nut-signature>
       <p class="demo-tips demo1">{{ translate('tips') }}</p>
     </div>
     <h2>{{ translate('title') }}</h2>
     <div>
-      <nut-signature :lineWidth="lineWidth" :strokeStyle="strokeStyle"></nut-signature>
+      <nut-signature :lineWidth="lineWidth" :strokeStyle="strokeStyle" @end="end"></nut-signature>
     </div>
   </div>
 </template>
@@ -47,7 +47,13 @@ export default createDemo({
     const clear = () => {
       console.log('清除');
     };
-    return { ...state, confirm, clear, translate };
+    const start = () => {
+      console.log('签名开始');
+    };
+    const end = () => {
+      console.log('签名结束');
+    };
+    return { ...state, confirm, clear, translate, start, end };
   }
 });
 </script>

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

@@ -130,5 +130,8 @@ export default {
 
 | Event | Description   | Arguments   |
 |----- | ----- | ----- 
+|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
 | clear | Click the re sign button to trigger the event callback function | -

src/packages/__VUE/signature/doc.md

@@ -109,5 +109,8 @@ export default {
 
 | 字段 | 说明 | 回调参数 
 |----- | ----- | ----- 
+| start `v3.2.0` | 签名开始回调函数（指某次笔画的开始） | 无
+| signing `v3.2.0` | 正在签名的回调函数（指某次笔画进行中） | event
+| end `v3.2.0` | 签名结束回调函数（指某次笔画的结束）| 无
 | confirm | 点击确认按钮触发事件回调函数 | canvas和签名图片展示的 data URI
-| clear | 点击重签按钮触发事件回调函数 | 无
+| clear | 点击重签按钮触发事件回调函数 | 无

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

@@ -75,5 +75,8 @@ setup() {
 
 | 字段 | 说明 | 回调参数 
 |----- | ----- | ----- 
+| start `v3.2.0`| 签名开始回调函数（指某次笔画的开始） | 无
+| signing `v3.2.0`| 正在签名的回调函数（指某次笔画进行中） | event
+| end `v3.2.0`| 签名结束回调函数（指某次笔画的结束）| 无
 | confirm | 点击确认按钮触发事件回调函数 | data URI
 | clear | 点击重签按钮触发事件回调函数 | 无

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

@@ -48,7 +48,7 @@ export default create({
     }
   },
   components: {},
-  emits: ['confirm', 'clear'],
+  emits: ['start', 'end', 'signing', 'confirm', 'clear'],
 
   setup(props, { emit }) {
     const classes = computed(() => {
@@ -67,6 +67,7 @@ export default create({
 
     const startEventHandler = (event: MouseEvent) => {
       event.preventDefault();
+      emit('start');
       state.ctx.beginPath();
       state.ctx.lineWidth = props.lineWidth;
       state.ctx.strokeStyle = props.strokeStyle;
@@ -76,6 +77,7 @@ export default create({
       event.preventDefault();
 
       let evt = event.changedTouches[0];
+      emit('signing', evt);
       let mouseX = evt.x;
       let mouseY = evt.y;
       state.ctx.lineTo(mouseX, mouseY);
@@ -84,6 +86,7 @@ export default create({
 
     const endEventHandler = (event) => {
       event.preventDefault();
+      emit('end');
     };
     const leaveEventHandler = (event) => {
       event.preventDefault();

src/packages/__VUE/signature/index.vue

@@ -46,7 +46,7 @@ export default create({
     }
   },
   components: {},
-  emits: ['confirm', 'clear'],
+  emits: ['start', 'end', 'signing', 'confirm', 'clear'],
 
   setup(props, { emit }) {
     const canvas: any = ref<HTMLElement | null>(null);
@@ -81,7 +81,7 @@ export default create({
       state.ctx.beginPath();
       state.ctx.lineWidth = props.lineWidth;
       state.ctx.strokeStyle = props.strokeStyle;
-
+      emit('start');
       canvas.value.addEventListener(state.events[1], moveEventHandler, false);
       canvas.value.addEventListener(state.events[2], endEventHandler, false);
       canvas.value.addEventListener(state.events[3], leaveEventHandler, false);
@@ -91,6 +91,7 @@ export default create({
       event.preventDefault();
 
       let evt = state.isSupportTouch ? event.touches[0] : event;
+      emit('signing', evt);
       let coverPos = canvas.value.getBoundingClientRect();
       let mouseX = evt.clientX - coverPos.left;
       let mouseY = evt.clientY - coverPos.top;
@@ -101,7 +102,7 @@ export default create({
 
     const endEventHandler = (event) => {
       event.preventDefault();
-
+      emit('end');
       canvas.value.removeEventListener(state.events[1], moveEventHandler, false);
       canvas.value.removeEventListener(state.events[2], endEventHandler, false);
     };

src/sites/mobile-taro/vue/project.private.config.json

@@ -7,8 +7,8 @@
     "miniprogram": {
       "list": [
         {
-          "name": "feedback/pages/notify/index",
-          "pathName": "feedback/pages/notify/index",
+          "name": "business/pages/signature/index",
+          "pathName": "business/pages/signature/index",
           "query": "",
           "launchMode": "default",
           "scene": null

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

@@ -6,6 +6,9 @@
       :strokeStyle="strokeStyle"
       @confirm="confirm"
       @clear="clear"
+      @start="start"
+      @signing="signing"
+      @end="end"
     />
   </div>
 </template>
@@ -40,7 +43,16 @@ export default {
         }
       });
     };
-    return { ...state, confirm, clear };
+    const start = () => {
+      console.log('签名开始');
+    };
+    const signing = (e) => {
+      console.log('签名进行中', e);
+    };
+    const end = () => {
+      console.log('签名结束');
+    };
+    return { ...state, confirm, clear, start, signing, end };
   }
 };
 </script>