uv-ui/lib/components/signature/signature.cjs

基于vue3的移动端组件库

"use strict";const n=require("vue"),_=require("../../hooks/useRect.cjs");require("../../hooks/useCountDown.cjs");require("./signature.vue_vue_type_style_index_0_lang.cjs");const w=["width","height"],E={class:"uv-signature-footer"},T={name:"UvSignature"},k=Object.assign(T,{props:{width:{type:String,default:"100%"},height:{type:String,default:"200px"},lineWidth:{type:Number,default:3},penColor:{type:String,default:"#000"},exportImgType:{type:String,default:"png"},clearButtonText:{type:String,default:"\u6E05\u7A7A"},confirmButtonText:{type:String,default:"\u786E\u8BA4"}},emits:["start","signing","end","clear","submit"],setup(r,{expose:p,emit:s}){const u=r,a=n.ref(null),l=n.ref(null),t=n.reactive({width:0,height:0,ctx:null});let i="";n.onMounted(()=>{var e,o,c;t.ctx=(e=l.value)==null?void 0:e.getContext("2d"),t.width=((o=a.value)==null?void 0:o.offsetWidth)||0,t.height=((c=a.value)==null?void 0:c.offsetHeight)||0});const m=()=>{if(!t.ctx)return!1;t.ctx.beginPath(),t.ctx.lineWidth=u.lineWidth,t.ctx.strokeStyle=u.penColor,i=_.useRect(l),s("start")},x=e=>{var g,f;if(!t.ctx)return!1;const o=e.touches[0],c=o.clientX-((i==null?void 0:i.left)||0),S=o.clientY-((i==null?void 0:i.top)||0);t.ctx.lineCap="round",t.ctx.lineJoin="round",(g=t.ctx)==null||g.lineTo(c,S),(f=t.ctx)==null||f.stroke(),s("signing",e)},v=e=>{s("end")},h=()=>{t.ctx&&(t.ctx.clearRect(0,0,t.width,t.height),t.ctx.closePath()),s("clear")},y=e=>{const o=document.createElement("canvas");return o.width=e.width,o.height=e.height,e.toDataURL()===o.toDataURL()},d=()=>{const e=l.value;if(!e)return;const c=y(e)?"":e.toDataURL(`image/${u.exportImgType}`,u.exportImgType==="jpg"?.9:null);s("submit",{image:c,canvas:e})};return p({clear:h,submit:d}),(e,o)=>(n.openBlock(),n.createElementBlock("div",{class:"uv-signature",style:n.normalizeStyle({height:r.height})},[n.createElementVNode("div",{class:"uv-signature-content",ref_key:"wrapRef",ref:a},[n.createElementVNode("canvas",{ref_key:"canvasRef",ref:l,width:t.width,height:t.height,onTouchstart:m,onTouchmove:x,onTouchend:v},null,40,w)],512),n.renderSlot(e.$slots,"footer",{},()=>[n.createElementVNode("div",E,[n.createElementVNode("div",{class:"uv-signature-footer-clear",onClick:h},n.toDisplayString(r.clearButtonText),1),n.createElementVNode("div",{class:"uv-signature-footer-confim",onClick:d},n.toDisplayString(r.confirmButtonText),1)])])],4))}});module.exports=k;