vue3-signature-panel/dist/vue3-signature-panel.js

canvas签名面板组件

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue");const w=(u,r)=>{const o=u.__vccOpts||u;for(const[c,l]of r)o[c]=l;return o},T={class:"signature-container"},C=["width","height"],k={class:"signature-actions"},M={name:"SignaturePanel"},x=Object.assign(M,{props:{width:{type:Number,default:400},height:{type:Number,default:200},lineWidth:{type:Number,default:2},lineColor:{type:String,default:"#000000"},generateText:{type:String,default:"生成图片"}},emits:["generate"],setup(u,{emit:r}){const o=u,c=t.ref(null),l=t.ref(!1),i=t.ref(0),d=t.ref(0);let a=null;t.onMounted(()=>{a=c.value.getContext("2d"),a.lineWidth=o.lineWidth,a.strokeStyle=o.lineColor,a.lineCap="round",a.lineJoin="round"});const v=e=>{l.value=!0;const{offsetX:n,offsetY:s}=e;i.value=n,d.value=s},_=e=>{if(!l.value)return;const{offsetX:n,offsetY:s}=e;a.beginPath(),a.moveTo(i.value,d.value),a.lineTo(n,s),a.stroke(),i.value=n,d.value=s},f=()=>{l.value=!1},m=e=>{e.preventDefault();const n=e.touches[0],s=c.value.getBoundingClientRect(),g=n.clientX-s.left,h=n.clientY-s.top;v({offsetX:g,offsetY:h})},b=e=>{e.preventDefault();const n=e.touches[0],s=c.value.getBoundingClientRect(),g=n.clientX-s.left,h=n.clientY-s.top;_({offsetX:g,offsetY:h})},y=()=>{a.clearRect(0,0,o.width,o.height)},S=()=>{const e=c.value.toDataURL("image/png");r("generate",e)};return(e,n)=>(t.openBlock(),t.createElementBlock("div",T,[t.createElementVNode("canvas",{ref_key:"canvasRef",ref:c,width:o.width,height:o.height,onMousedown:v,onMousemove:_,onMouseup:f,onMouseleave:f,onTouchstart:m,onTouchmove:b,onTouchend:f},null,40,C),t.createElementVNode("div",k,[t.createElementVNode("button",{onClick:y},"清除"),t.createElementVNode("button",{onClick:S},t.toDisplayString(o.generateText),1)])]))}}),p=w(x,[["__scopeId","data-v-1b763d65"]]);exports.SignaturePanel=p;exports.default=p;