uv-ui
Version:
基于vue3的移动端组件库
2 lines (1 loc) • 5.4 kB
JavaScript
;const n=require("vue");require("./slider-vertify.vue_vue_type_style_index_0_lang.cjs");const P=["width","height"],$=["width","height"],O=n.createElementVNode("div",{class:"uv-slider-vertify-slider-icon"}," \u2192 ",-1),U=[O],j={class:"uv-slider-vertify-slider-text"},x=n.createElementVNode("div",{class:"uv-slider-vertify-loading-icon"},null,-1),A=n.createElementVNode("span",null,"\u52A0\u8F7D\u4E2D...",-1),W=[x,A],G={name:"UvSliderVertify"},H=Object.assign(G,{props:{width:{type:Number,default:320},height:{type:Number,default:160},visible:{type:Boolean,default:!0},refreshIcon:{type:String,default:"http://cdn.dooring.cn/dr/icon12.png"},l:{type:Number,default:42},r:{type:Number,default:9},imgUrl:{type:String,default:""},text:{type:String,default:""},onDraw:{type:Function,default:s=>{}},onCustomVertify:{type:Function,default:s=>s},onBeforeRefresh:{type:Function,default:()=>{}},onSuccess:{type:Function,default:()=>{}},onFail:{type:Function,default:()=>{}},onRefresh:{type:Function,default:()=>{}}},setup(s){const r=s,y=n.ref(!1),g=n.ref(0),u=n.ref("uv-slider-vertify-container"),V=n.ref(r.text),S=n.ref(null),c=n.ref(null),N=n.ref(null),m=n.ref(!1),C=n.ref([]),k=n.ref(0),M=n.ref(0),d=n.ref(0),p=n.ref(0),v=Math.PI,f=r.l+r.r*2+3;function E(e,t){return Math.round(Math.random()*(t-e)+e)}function T(e,t){return e+t}function Y(e){return e*e}const X=(e,t,l,a)=>{const{l:o,r:i}=r;e.beginPath(),e.moveTo(t,l),e.arc(t+o/2,l-i+2,i,.72*v,2.26*v),e.lineTo(t+o,l),e.arc(t+o+i-2,l+o/2,i,1.21*v,2.78*v),e.lineTo(t+o,l+o),e.lineTo(t,l+o),e.arc(t+i-2,l+o/2,i+.4,2.76*v,1.24*v,!0),e.lineTo(t,l),e.lineWidth=1,e.fillStyle="rgba(255, 255, 255, 0.7)",e.strokeStyle="rgba(255, 255, 255, 0.7)",e.stroke(),e.globalCompositeOperation="destination-over",a==="fill"?e.fill():e.clip()},I=()=>{const{imgUrl:e,width:t,height:l}=r;return e||`https://picsum.photos/id/${E(0,1084)}/${t}/${l}`},B=e=>{const t=new Image;return t.crossOrigin="Anonymous",t.onload=e,t.onerror=()=>{t.setSrc(I())},t.setSrc=l=>{t.src=l},t.setSrc(I()),t},q=e=>{const{width:t,height:l,r:a}=r,o=S.value.getContext("2d"),i=c.value.getContext("2d");d.value=E(f+10,t-(f+10)),p.value=E(10+a*2,l-(f+10)),X(o,d.value,p.value,"fill"),X(i,d.value,p.value,"clip"),o.drawImage(e,0,0,t,l),i.drawImage(e,0,0,t,l);const h=p.value-a*2-1,R=i.getImageData(d.value-3,h,f,f);c.value.width=f,i.putImageData(R,0,h)},_=()=>{const e=B(()=>{y.value=!1,q(e)});N.value=e},w=()=>{const{width:e,height:t,onBeforeRefresh:l}=r,a=S.value.getContext("2d"),o=c.value.getContext("2d");g.value=0,u.value="uv-slider-vertify-container",c.value.width=e,c.value.style.left=0+"px",a.clearRect(0,0,e,t),o.clearRect(0,0,e,t),l&&l(),y.value=!0,N.value.setSrc(I())},L=()=>{const{onRefresh:e}=r;w(),typeof e=="function"&&e()},D=()=>{const e=C.value,t=e.reduce(T)/e.length,l=e.map(i=>i-t),a=Math.sqrt(l.map(Y).reduce(T)/e.length),o=parseInt(c.value.style.left);return{spliced:Math.abs(o-d.value)<10,verified:a!==0,left:o,destX:d.value}},b=function(e){k.value=e.clientX||e.touches[0].clientX,M.value=e.clientY||e.touches[0].clientY,m.value=!0},F=e=>{const{width:t,onDraw:l}=r;if(!m.value)return!1;e.preventDefault();const a=e.clientX||e.touches[0].clientX,o=e.clientY||e.touches[0].clientY,i=a-k.value,h=o-M.value;if(i<0||i+38>=t)return!1;g.value=i;const R=(t-40-20)/(t-40)*i;c.value.style.left=R+"px",u.value="uv-slider-vertify-container uv-slider-vertify-container-active",C.value.push(h),l&&l(R)},z=e=>{const{onCustomVertify:t,onSuccess:l,onFail:a}=r;if(!m.value||(m.value=!1,(e.clientX||e.changedTouches[0].clientX)===k.value))return!1;u.value="uv-slider-vertify-container";const{spliced:i,verified:h}=t?t(D()):D();i?h?(u.value="uv-slider-vertify-container uv-slider-vertify-container-success",typeof l=="function"&&l()):(u.value="uv-slider-vertify-container uv-slider-vertify-container-fail",V.value="\u8BF7\u518D\u8BD5\u4E00\u6B21",w()):(u.value="uv-slider-vertify-container uv-slider-vertify-container-fail",typeof a=="function"&&a(),setTimeout(w.bind(this),1e3))};return n.onMounted(()=>{_()}),n.watch(()=>r.visible,()=>{r.visible&&(N.value?w():_())}),(e,t)=>(n.openBlock(),n.createElementBlock("div",{class:"uv-slider-vertify",style:n.normalizeStyle({width:s.width+"px",margin:"0 auto",display:s.visible?"":"none"}),onMousemove:F,onMouseup:z,onTouchmove:F,onTouchend:z},[n.createElementVNode("div",null,[n.createElementVNode("canvas",{ref_key:"canvasRef",ref:S,width:s.width,height:s.height},null,8,P),n.createElementVNode("canvas",{ref_key:"blockRef",ref:c,class:"uv-slider-vertify-block",width:s.width,height:s.height,onMousedown:b,onTouchstart:b},null,40,$)]),n.createElementVNode("div",{class:n.normalizeClass(u.value),style:n.normalizeStyle({pointerEvents:y.value?"none":"auto",width:s.width+"px"})},[n.createElementVNode("div",{class:"uv-slider-vertify-slider-mask",style:n.normalizeStyle({width:g.value+"px"})},[n.createElementVNode("div",{class:"uv-slider-vertify-slider",style:n.normalizeStyle({left:g.value+"px"}),onMousedown:b,onTouchstart:b},U,36)],4),n.createElementVNode("div",j,n.toDisplayString(V.value),1)],6),n.createElementVNode("div",{class:"uv-slider-vertify-refresh-icon",onClick:L,style:n.normalizeStyle({backgroundImage:`url(${s.refreshIcon})`})},null,4),n.createElementVNode("div",{class:"uv-slider-vertify-loading-container",style:n.normalizeStyle({width:s.width+"px",height:s.height+"px",display:y.value?"":"none"})},W,4)],36))}});module.exports=H;