vue-slider-vertify/dist/vue-slider-vertify.umd.js

Slide verification component based on vue3

(function(d,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(d=typeof globalThis!="undefined"?globalThis:d||self,e(d["vue-slider-vertify"]={},d.Vue))})(this,function(d,e){"use strict";function E(l,u){return Math.round(Math.random()*(u-l)+l)}function Y(l,u){return l+u}function Z(l){return l*l}var he="",ee=(l,u)=>{const w=l.__vccOpts||l;for(const[i,r]of u)w[i]=r;return w};const T=l=>(e.pushScopeId("data-v-d497bec6"),l=l(),e.popScopeId(),l),te={className:"canvasArea"},ne=["width","height"],oe=["width","height"],le=["className"],ae=[T(()=>e.createElementVNode("div",{className:"sliderIcon"},"\u2192",-1))],se={className:"sliderText"},ie=[T(()=>e.createElementVNode("div",{className:"loadingIcon"},null,-1)),T(()=>e.createElementVNode("span",null,"\u52A0\u8F7D\u4E2D...",-1))];var z=ee(e.defineComponent({props:{width:{default:320},visible:{type:Boolean,default:!0},height:{default:160},refreshIcon:{default:"http://cdn.dooring.cn/dr/icon12.png"},l:{default:42},r:{default:9},imgUrl:{default:""},text:{default:""},onDraw:null,onCustomVertify:null,onBeforeRefresh:null,onSuccess:null,onFail:null,onRefresh:null},setup(l){const u=l,{text:w,l:i,r,imgUrl:ce,width:s,height:f,visible:V,onBeforeRefresh:L,onRefresh:P,onFail:A,onSuccess:F,onCustomVertify:O,onDraw:q}=u,C=e.ref(!1),N=e.ref(0),m=e.ref("sliderContainer"),$=e.ref(w),D=e.ref(null),h=e.ref(null),M=e.ref(null),I=e.ref(!1),x=e.ref([]),k=e.ref(0),U=e.ref(0),p=e.ref(0),R=e.ref(0),g=Math.PI,v=i+r*2+3,j=(t,n,o,a)=>{t.beginPath(),t.moveTo(n,o),t.arc(n+i/2,o-r+2,r,.72*g,2.26*g),t.lineTo(n+i,o),t.arc(n+i+r-2,o+i/2,r,1.21*g,2.78*g),t.lineTo(n+i,o+i),t.lineTo(n,o+i),t.arc(n+r-2,o+i/2,r+.4,2.76*g,1.24*g,!0),t.lineTo(n,o),t.lineWidth=2,t.fillStyle="rgba(255, 255, 255, 0.7)",t.strokeStyle="rgba(255, 255, 255, 0.7)",t.stroke(),t.globalCompositeOperation="destination-over",a==="fill"?t.fill():t.clip()},X=()=>ce||`https://picsum.photos/id/${E(0,1084)}/${s}/${f}`,de=t=>{const n=new Image;return n.crossOrigin="Anonymous",n.onload=t,n.onerror=()=>{n.setSrc(X())},n.setSrc=o=>{if(window.navigator.userAgent.indexOf("Trident")>-1){const c=new XMLHttpRequest;c.onloadend=function(_){const K=new FileReader;K.readAsDataURL(_.target.response),K.onloadend=function(B){var Q;n.src=(Q=B==null?void 0:B.target)==null?void 0:Q.result}},c.open("GET",o),c.responseType="blob",c.send()}else n.src=o},n.setSrc(X()),n},ue=t=>{const n=D.value.getContext("2d"),o=h.value.getContext("2d");p.value=E(v+10,s-(v+10)),R.value=E(10+r*2,f-(v+10)),j(n,p.value,R.value,"fill"),j(o,p.value,R.value,"clip"),n.drawImage(t,0,0,s,f),o.drawImage(t,0,0,s,f);const a=R.value-r*2-1,c=o.getImageData(p.value-3,a,v,v);h.value.width=v,o.putImageData(c,0,a)},W=()=>{const t=de(()=>{C.value=!1,ue(t)});M.value=t},b=()=>{const t=D.value.getContext("2d"),n=h.value.getContext("2d");N.value=0,m.value="sliderContainer",h.value.width=s,h.value.style.left=0+"px",t.clearRect(0,0,s,f),n.clearRect(0,0,s,f),L&&L(),C.value=!0,M.value.setSrc(X())},fe=()=>{b(),typeof P=="function"&&P()},G=()=>{const t=x.value,n=t.reduce(Y)/t.length,o=t.map(_=>_-n),a=Math.sqrt(o.map(Z).reduce(Y)/t.length),c=parseInt(h.value.style.left);return{spliced:Math.abs(c-p.value)<10,verified:a!==0,left:c,destX:p.value}},S=function(t){k.value=t.clientX||t.touches[0].clientX,U.value=t.clientY||t.touches[0].clientY,I.value=!0},H=t=>{if(!I.value)return!1;t.preventDefault();const n=t.clientX||t.touches[0].clientX,o=t.clientY||t.touches[0].clientY,a=n-k.value,c=o-U.value;if(a<0||a+38>=s)return!1;N.value=a;const _=(s-40-20)/(s-40)*a;h.value.style.left=_+"px",m.value="sliderContainer sliderContainer_active",x.value.push(c),q&&q(_)},J=t=>{if(!I.value||(I.value=!1,(t.clientX||t.changedTouches[0].clientX)===k.value))return!1;m.value="sliderContainer";const{spliced:o,verified:a}=O?O(G()):G();o?a?(m.value="sliderContainer sliderContainer_success",typeof F=="function"&&F()):(m.value="sliderContainer sliderContainer_fail",$.value="\u8BF7\u518D\u8BD5\u4E00\u6B21",b()):(m.value="sliderContainer sliderContainer_fail",typeof A=="function"&&A(),setTimeout(b.bind(this),1e3))};return e.onMounted(()=>{W()}),e.watch(()=>V,()=>{V&&(M.value?b():W())}),(t,n)=>(e.openBlock(),e.createElementBlock("div",{className:"vertifyWrap",style:e.normalizeStyle({width:e.unref(s)+"px",margin:"0 auto",display:e.unref(V)?"":"none"}),onMousemove:H,onMouseup:J,onTouchmove:H,onTouchend:J},[e.createElementVNode("div",te,[e.createElementVNode("canvas",{ref:(o,a)=>{a.canvasRef=o,D.value=o},width:e.unref(s),height:e.unref(f)},null,8,ne),e.createElementVNode("canvas",{ref:(o,a)=>{a.blockRef=o,h.value=o},className:"block",width:e.unref(s),height:e.unref(f),onMousedown:S,onTouchstart:S},null,40,oe)]),e.createElementVNode("div",{className:m.value,style:e.normalizeStyle({pointerEvents:C.value?"none":"auto",width:e.unref(s)+"px"})},[e.createElementVNode("div",{className:"sliderMask",style:e.normalizeStyle({width:N.value+"px"})},[e.createElementVNode("div",{className:"slider",style:e.normalizeStyle({left:N.value+"px"}),onMousedown:S,onTouchstart:S},ae,36)],4),e.createElementVNode("div",se,e.toDisplayString($.value),1)],12,le),e.createElementVNode("div",{className:"refreshIcon",onClick:fe,style:e.normalizeStyle({backgroundImage:`url(${l.refreshIcon})`})},null,4),e.createElementVNode("div",{className:"loadingContainer",style:e.normalizeStyle({width:e.unref(s)+"px",height:e.unref(f)+"px",display:C.value?"":"none"})},ie,4)],36))}}),[["__scopeId","data-v-d497bec6"]]);const y={install(l){l.component("vertify",z)}},re={install(l){var u;(u=y.install)==null||u.call(y,l)}};d.Vertify=z,d.VertifyPlugin=y,d.default=re,Object.defineProperty(d,"__esModule",{value:!0}),d[Symbol.toStringTag]="Module"});