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

canvas签名面板组件

(function(c,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(c=typeof globalThis<"u"?globalThis:c||self,e(c["vue3-signature-panel"]={},c.Vue))})(this,function(c,e){"use strict";const M="",y=(u,r)=>{const o=u.__vccOpts||u;for(const[l,i]of r)o[l]=i;return o},b={class:"signature-container"},T=["width","height"],S={class:"signature-actions"},p=y(Object.assign({name:"SignaturePanel"},{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,l=e.ref(null),i=e.ref(!1),f=e.ref(0),d=e.ref(0);let s=null;e.onMounted(()=>{s=l.value.getContext("2d"),s.lineWidth=o.lineWidth,s.strokeStyle=o.lineColor,s.lineCap="round",s.lineJoin="round"});const v=t=>{i.value=!0;const{offsetX:n,offsetY:a}=t;f.value=n,d.value=a},m=t=>{if(!i.value)return;const{offsetX:n,offsetY:a}=t;s.beginPath(),s.moveTo(f.value,d.value),s.lineTo(n,a),s.stroke(),f.value=n,d.value=a},_=()=>{i.value=!1},w=t=>{t.preventDefault();const n=t.touches[0],a=l.value.getBoundingClientRect(),g=n.clientX-a.left,h=n.clientY-a.top;v({offsetX:g,offsetY:h})},C=t=>{t.preventDefault();const n=t.touches[0],a=l.value.getBoundingClientRect(),g=n.clientX-a.left,h=n.clientY-a.top;m({offsetX:g,offsetY:h})},k=()=>{s.clearRect(0,0,o.width,o.height)},x=()=>{const t=l.value.toDataURL("image/png");r("generate",t)};return(t,n)=>(e.openBlock(),e.createElementBlock("div",b,[e.createElementVNode("canvas",{ref_key:"canvasRef",ref:l,width:o.width,height:o.height,onMousedown:v,onMousemove:m,onMouseup:_,onMouseleave:_,onTouchstart:w,onTouchmove:C,onTouchend:_},null,40,T),e.createElementVNode("div",S,[e.createElementVNode("button",{onClick:k},"清除"),e.createElementVNode("button",{onClick:x},e.toDisplayString(o.generateText),1)])]))}}),[["__scopeId","data-v-1b763d65"]]);c.SignaturePanel=p,c.default=p,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});