@nutui/nutui 3.1.10 → 3.1.12-beta.1

package/dist/packages/_es/Signature.js

@@ -1,13 +1,13 @@
 /*!
-* @nutui/nutui v3.1.10 Fri Nov 05 2021 19:52:49 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.11 Wed Nov 24 2021 14:54:38 GMT+0800 (中国标准时间)
 * (c) 2021 @jdf2e.
 * Released under the MIT License.
 */
-import { ref, computed, reactive, onMounted, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, createVNode, withCtx, createTextVNode } from "vue";
+import Taro from "@tarojs/taro";
+import { computed, reactive, onMounted, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, withCtx, createTextVNode } from "vue";
 import { c as createComponent } from "./component.js";
-import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 const { componentName, create } = createComponent("signature");
-const _sfc_main = create({
+var _sfc_main = create({
   props: {
     customClass: {
       type: String,
@@ -33,8 +33,6 @@ const _sfc_main = create({
   components: {},
   emits: ["confirm", "clear"],
   setup(props, { emit }) {
-    const canvas = ref(null);
-    const wrap = ref(null);
     const classes = computed(() => {
       const prefixCls = componentName;
       return {
@@ -43,125 +41,126 @@ const _sfc_main = create({
       };
     });
     const state = reactive({
+      canvas: null,
       canvasHeight: 0,
       canvasWidth: 0,
-      ctx: null,
-      isSupportTouch: "ontouchstart" in window,
-      events: "ontouchstart" in window ? ["touchstart", "touchmove", "touchend", "touchleave"] : ["mousedown", "mousemove", "mouseup", "mouseleave"]
+      ctx: null
     });
-    const isCanvasSupported = () => {
-      let elem = document.createElement("canvas");
-      return !!(elem.getContext && elem.getContext("2d"));
-    };
-    const addEvent = () => {
-      canvas.value.addEventListener(state.events[0], startEventHandler, false);
-    };
     const startEventHandler = (event) => {
       event.preventDefault();
       state.ctx.beginPath();
       state.ctx.lineWidth = props.lineWidth;
       state.ctx.strokeStyle = props.strokeStyle;
-      canvas.value.addEventListener(state.events[1], moveEventHandler, false);
-      canvas.value.addEventListener(state.events[2], endEventHandler, false);
-      canvas.value.addEventListener(state.events[3], leaveEventHandler, false);
     };
     const moveEventHandler = (event) => {
       event.preventDefault();
-      let evt = state.isSupportTouch ? event.touches[0] : event;
-      let coverPos = canvas.value.getBoundingClientRect();
-      let mouseX = evt.clientX - coverPos.left;
-      let mouseY = evt.clientY - coverPos.top;
+      let evt = event.changedTouches[0];
+      let mouseX = evt.x;
+      let mouseY = evt.y;
       state.ctx.lineTo(mouseX, mouseY);
       state.ctx.stroke();
     };
     const endEventHandler = (event) => {
       event.preventDefault();
-      canvas.value.removeEventListener(state.events[1], moveEventHandler, false);
-      canvas.value.removeEventListener(state.events[2], endEventHandler, false);
     };
     const leaveEventHandler = (event) => {
       event.preventDefault();
-      canvas.value.removeEventListener(state.events[1], moveEventHandler, false);
-      canvas.value.removeEventListener(state.events[2], endEventHandler, false);
     };
     const clear = () => {
-      canvas.value.addEventListener(state.events[2], endEventHandler, false);
       state.ctx.clearRect(0, 0, state.canvasWidth, state.canvasHeight);
       state.ctx.closePath();
       emit("clear");
     };
     const confirm = () => {
-      onSave(canvas.value);
+      onSave();
     };
-    const onSave = (canvas2) => {
-      let dataurl;
-      switch (props.type) {
-        case "png":
-          dataurl = canvas2.toDataURL("image/png");
-          break;
-        case "jpg":
-          dataurl = canvas2.toDataURL("image/jpeg", 0.8);
-          break;
+    const onSave = () => {
+      if (!state.canvas) {
+        return;
       }
-      clear();
-      emit("confirm", canvas2, dataurl);
+      Taro.createSelectorQuery().select("#spcanvas").fields({
+        node: true,
+        size: true
+      }).exec(async (res) => {
+        Taro.canvasToTempFilePath({
+          canvas: res[0].node,
+          fileType: props.type
+        }).then((res2) => {
+          emit("confirm", res2.tempFilePath);
+        }).catch((e) => {
+          emit("confirm", e);
+        });
+      });
     };
     onMounted(() => {
-      if (isCanvasSupported()) {
-        state.ctx = canvas.value.getContext("2d");
-        state.canvasWidth = wrap.value.offsetWidth;
-        state.canvasHeight = wrap.value.offsetHeight;
-        addEvent();
-      }
+      setTimeout(() => {
+        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();
+      }, 500);
     });
-    return { canvas, wrap, isCanvasSupported, confirm, clear, classes };
+    return {
+      confirm,
+      clear,
+      classes,
+      startEventHandler,
+      moveEventHandler,
+      endEventHandler,
+      leaveEventHandler
+    };
   }
 });
-const _hoisted_1 = {
-  class: "nut-signature-inner",
-  ref: "wrap"
-};
-const _hoisted_2 = ["height", "width"];
-const _hoisted_3 = {
-  key: 1,
-  class: "nut-signature-unsopport"
-};
-const _hoisted_4 = /* @__PURE__ */ createTextVNode("\u91CD\u7B7E");
-const _hoisted_5 = /* @__PURE__ */ createTextVNode("\u786E\u8BA4");
+const _hoisted_1 = { class: "nut-signature-inner" };
+const _hoisted_2 = /* @__PURE__ */ createTextVNode("\u91CD\u7B7E");
+const _hoisted_3 = /* @__PURE__ */ createTextVNode("\u786E\u8BA4");
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_nut_button = resolveComponent("nut-button");
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(_ctx.classes)
   }, [
     createElementVNode("div", _hoisted_1, [
-      _ctx.isCanvasSupported ? (openBlock(), createElementBlock("canvas", {
-        key: 0,
-        ref: "canvas",
-        height: _ctx.canvasHeight,
-        width: _ctx.canvasWidth
-      }, null, 8, _hoisted_2)) : (openBlock(), createElementBlock("p", _hoisted_3, toDisplayString(_ctx.unSupportTpl), 1))
-    ], 512),
+      createElementVNode("canvas", {
+        class: "spcanvas",
+        id: "spcanvas",
+        canvasId: "spcanvas",
+        "canvas-id": "spcanvas",
+        type: "2d",
+        "disable-scroll": "true",
+        onTouchstart: _cache[0] || (_cache[0] = (...args) => _ctx.startEventHandler && _ctx.startEventHandler(...args)),
+        onTouchmove: _cache[1] || (_cache[1] = (...args) => _ctx.moveEventHandler && _ctx.moveEventHandler(...args)),
+        onTouchend: _cache[2] || (_cache[2] = (...args) => _ctx.endEventHandler && _ctx.endEventHandler(...args)),
+        onTouchleave: _cache[3] || (_cache[3] = (...args) => _ctx.leaveEventHandler && _ctx.leaveEventHandler(...args))
+      }, null, 32)
+    ]),
     createVNode(_component_nut_button, {
       class: "nut-signature-btn",
       type: "default",
-      onClick: _cache[0] || (_cache[0] = ($event) => _ctx.clear())
+      onClick: _cache[4] || (_cache[4] = ($event) => _ctx.clear())
     }, {
       default: withCtx(() => [
-        _hoisted_4
+        _hoisted_2
       ]),
       _: 1
     }),
     createVNode(_component_nut_button, {
       class: "nut-signature-btn",
       type: "primary",
-      onClick: _cache[1] || (_cache[1] = ($event) => _ctx.confirm())
+      onClick: _cache[5] || (_cache[5] = ($event) => _ctx.confirm())
     }, {
       default: withCtx(() => [
-        _hoisted_5
+        _hoisted_3
       ]),
       _: 1
     })
   ], 2);
 }
-var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-export { index as default };
+_sfc_main.render = _sfc_render;
+export { _sfc_main as default };