vuux
Version:
Vue3 Nuxt3 Nuxt4 组件库
2 lines (1 loc) • 3.17 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("vue"),F=require("@vuux/utils"),L=(o,C,r,f,m,u,g)=>{const V={text:"请按住滑块拖动",successText:"验证通过"},p=h.ref(!1),y=h.ref(!1),c=h.ref(!1),v=h.ref(0),I=h.ref(0),b=40,T=8,P=h.computed({get:()=>o.modelValue?o.successText||V.successText:o.text||V.text,set:e=>e}),E=async()=>{p.value=!0,c.value=!1,g("result",!0),g("update:modelValue",!0),await F.Utils.wait(300),u.value&&(u.value.style.left=I.value+"px"),m.value&&(m.value.style.display="none")},W=e=>e.getContext("2d",{willReadFrequently:!0}),A=(e,t,l,i)=>{const a=b,n=T,s=Math.PI;e.beginPath(),e.moveTo(t,l),e.arc(t+a/2,l-n+2,n,.72*s,2.26*s),e.lineTo(t+a,l),e.arc(t+a+n-2,l+a/2,n,1.21*s,2.78*s),e.lineTo(t+a,l+a),e.lineTo(t,l+a),e.arc(t+n-2,l+a/2,n+.4,2.76*s,1.24*s,!0),e.lineTo(t,l),e.lineWidth=1,e.fillStyle="rgba(255, 255, 255, 0.6)",e.strokeStyle="rgba(255, 255, 255, 0.6)",e.stroke(),e[i](),e.globalCompositeOperation="destination-over"},w=()=>{!C.value||!m.value||!u.value||requestAnimationFrame(()=>{const e=C.value,t=m.value,l=u.value,i=e.clientHeight,a=e.clientWidth;if(a===0||i===0){setTimeout(w,50);return}const n=W(t),s=W(l);n.clearRect(0,0,a,i),s.clearRect(0,0,a,i);const M=Math.floor(240/2),X=25,H=20,S=M+Math.ceil(Math.random()*(M-b-T-5));let d=X+Math.floor(Math.random()*(i-b-X-H));t.setAttribute("width",a.toString()),t.setAttribute("height",i.toString()),t.style.display="block",A(n,S,d,"fill"),I.value=S,l.setAttribute("width",a.toString()),l.setAttribute("height",i.toString()),l.style.display="block";const O=b+T*2+3;A(s,S,d,"clip"),s.drawImage(e,0,0,a,i),d=d-T*2-1;const q=s.getImageData(S,d,O,O);l.setAttribute("width",O.toString()),l.setAttribute("height",i.toString()),s.putImageData(q,0,d),l.style.left="0",r.value&&(r.value.style.left="0"),f.value&&(f.value.style.width="0")})},D=()=>{g("update:modelValue",!1),p.value=!1,y.value=!1,c.value=!1,r.value&&(r.value.style.left="0"),f.value&&(f.value.style.width="0"),u.value&&(u.value.style.left="0")};return{puzzleIsOk:p,puzzleIsLoosen:y,puzzleIsMoving:c,puzzleMessage:P,puzzleCheckimgLoaded:w,puzzleOnMousedown:e=>{e.cancelable&&e.preventDefault(),o.modelValue||(c.value=!0,e instanceof MouseEvent?v.value=e.pageX:e instanceof TouchEvent&&(v.value=e.touches[0].pageX))},puzzleOnMousemove:e=>{if(e.cancelable&&e.preventDefault(),c.value&&!o.modelValue){let t=0;e instanceof MouseEvent?t=e.pageX-v.value:e instanceof TouchEvent&&(t=e.touches[0].pageX-v.value),r.value&&(r.value.style.left=t+"px"),f.value&&(f.value.style.width=t+40/2+"px"),u.value&&(u.value.style.left=t+"px")}},puzzleOnMouseup:async e=>{if(e.cancelable&&e.stopPropagation(),c.value&&!o.modelValue){let t=0;e instanceof MouseEvent?t=e.pageX-v.value:e instanceof TouchEvent&&(t=e.changedTouches[0].pageX-v.value),Math.abs(t-I.value)>(o.difference||2)?(y.value=!0,setTimeout(()=>{r.value&&(r.value.style.left="0"),f.value&&(f.value.style.width="0"),u.value&&(u.value.style.left="0"),y.value=!1},500),setTimeout(()=>{D(),w()},650),g("result",!1),g("update:modelValue",!1)):E(),c.value=!1}},puzzleReset:()=>{D(),w(),P.value=o.text??V.text}}};exports.useVerifyPuzzle=L;