vue3-sign/dist/vue3-sign.umd.js

electronic signature component library based on vue

(function(a,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(a=typeof globalThis!="undefined"?globalThis:a||self,e(a["vue3-sign"]={},a.Vue))})(this,function(a,e){"use strict";var A="",S=(i,u)=>{const d=i.__vccOpts||i;for(const[v,g]of u)d[v]=g;return d};const k={class:"esign-wrapper"},L=["width","height"],X={className:"sign-btnWrap"};var w=S(e.defineComponent({props:{width:{default:400},height:{default:200},lineWidth:{default:4},strokeColor:{default:"green"},lineCap:{default:"round"},lineJoin:{default:"round"},bgColor:{default:"transparent"},showBtn:{type:Boolean,default:!0},onSave:null,onClear:null,onDrawEnd:null},setup(i){const u=i,{width:d,height:v,lineWidth:g,strokeColor:R,lineCap:Y,lineJoin:D,bgColor:N,showBtn:T,onSave:_,onClear:E,onDrawEnd:C}=u,s=e.ref(null),t=e.ref(null),c=e.ref({offsetX:0,offsetY:0,endX:0,endY:0}),r=/Mobile|Android|iPhone/i.test(navigator.userAgent),P=()=>{s.value&&(s.value.getContext("2d").clearRect(0,0,d,v),E&&E(s.value))},V=()=>{s.value.toBlob(n=>{const l=Date.now().toString(),o=document.createElement("a");o.download=`${l}.png`,o.href=URL.createObjectURL(n),o.click(),o.remove(),_&&_(n)})},y=n=>{const{pageX:l,pageY:o}=r?n.changedTouches[0]:n,f=s.value,{x:p,y:m}=f.getBoundingClientRect();c.value.endX=l,c.value.endY=o,t.value.lineTo(l-p,o-m),t.value.stroke()},b=n=>{const{offsetX:l,offsetY:o,pageX:f,pageY:p}=r?n.changedTouches[0]:n,m=s.value,{x:O,y:U}=m.getBoundingClientRect();c.value.offsetX=l,c.value.offsetY=o,c.value.endX=f,c.value.endY=p,t.value.beginPath(),t.value.lineWidth=g,t.value.strokeStyle=R,t.value.lineCap=Y,t.value.lineJoin=D,t.value.moveTo(c.value.endX-O,c.value.endY-U),window.addEventListener(r?"touchmove":"mousemove",y)},x=()=>{console.log(t.value),t.value.closePath(),window.removeEventListener("mousemove",y),C&&C(s.current)},M=()=>{const n=s.value;n.width=d,n.height=v;const l=n.getContext("2d");t.value=l,t.value.fillStyle=N,t.value.fillRect(0,0,d,v)},W=()=>{window.addEventListener(r?"touchstart":"mousedown",b),window.addEventListener(r?"touchend":"mouseup",x)},j=()=>{window.removeEventListener(r?"touchstart":"mousedown",b),window.removeEventListener(r?"touchend":"mouseup",x)},J=()=>{M(),W()};return e.onMounted(()=>{J()}),e.onUnmounted(()=>{j()}),(n,l)=>(e.openBlock(),e.createElementBlock("div",k,[e.createElementVNode("canvas",{ref:(o,f)=>{f.canvasRef=o,s.value=o},width:e.unref(d),height:e.unref(v),style:{border:"1px solid #ccc"}},null,8,L),e.withDirectives(e.createElementVNode("div",X,[e.createElementVNode("span",{onClick:P,className:"sign-btn"},"\u6E05\u9664"),e.createElementVNode("span",{onClick:V,className:"sign-btn primary"},"\u4FDD\u5B58")],512),[[e.vShow,e.unref(T)]])]))}}),[["__scopeId","data-v-f9eba666"]]);const h={install(i){i.component("ESign",w)}},B={install(i){var u;(u=h.install)==null||u.call(h,i)}};a.ESign=w,a.ESignPlugin=h,a.default=B,Object.defineProperty(a,"__esModule",{value:!0}),a[Symbol.toStringTag]="Module"});