jh-slider-valid/dist/jhslidervalid.umd.js

金合前端组件

(function(t,w){typeof exports=="object"&&typeof module<"u"?module.exports=w(require("vue")):typeof define=="function"&&define.amd?define(["vue"],w):(t=typeof globalThis<"u"?globalThis:t||self,t.JHSliderValid=w(t.Vue))})(this,function(t){"use strict";const w=["width","height"],I=["width","height"],L=["width","height"],O=[t.createElementVNode("div",{class:"loading-gif_"},[t.createElementVNode("span"),t.createElementVNode("span"),t.createElementVNode("span"),t.createElementVNode("span"),t.createElementVNode("span")],-1)],R=[t.createElementVNode("svg",{t:"1658824925736",class:"icon reset_",viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","p-id":"3054",width:"200",height:"200"},[t.createElementVNode("path",{d:"M508.5 889.1c-51.1 0-100.7-10-147.4-29.8-45.1-19.1-85.6-46.4-120.3-81.1-34.8-34.8-62.1-75.3-81.1-120.3-19.7-46.7-29.8-96.3-29.8-147.4 0-54.2 11.2-106.5 33.3-155.6l36.5 16.5c-19.8 43.8-29.8 90.6-29.8 139.1 0 186.7 151.9 338.6 338.6 338.6 69.7 0 136.7-21 193.7-60.8l22.9 32.8c-63.7 44.4-138.6 68-216.6 68zM858.1 656.1l-36.9-15.4c17.2-41.3 25.9-85.1 25.9-130.2 0-186.7-151.9-338.6-338.6-338.6-69.3 0-135.9 20.8-192.6 60.1l-22.8-33c63.4-44 137.9-67.2 215.4-67.2 51.1 0 100.7 10 147.4 29.8 45.1 19.1 85.6 46.4 120.3 81.1C811 277.5 838.3 318 857.3 363c19.7 46.7 29.8 96.3 29.8 147.4 0 50.5-9.7 99.5-29 145.7z","p-id":"3055"}),t.createElementVNode("path",{d:"M271 454.9L166.6 318.1 57.5 453.9zM965.5 554.6L861 691.4 752 555.5z","p-id":"3056"})],-1)],Y={class:"auth-control_"},k={class:"range-text"},P=[t.createElementVNode("div",null,null,-1),t.createElementVNode("div",null,null,-1),t.createElementVNode("div",null,null,-1)],F=t.defineComponent({__name:"jh-slider-valid",props:{width:{default:320},height:{default:170},show:{type:Boolean,default:!1},sliderSize:{default:30},scale:{default:1},range:{default:10},images:{default:()=>null},successText:{default:"\u9A8C\u8BC1\u6210\u529F"},failText:{default:"\u9A8C\u8BC1\u5931\u8D25"},sliderText:{default:"\u62D6\u52A8\u6ED1\u5757\u5B8C\u6210\u9A8C\u8BC1"},padding:{default:15},el:{default:"body"}},emits:["success","fail","close"],setup(C,{emit:M}){const n=C,h=t.computed(()=>Math.max(Math.min(Math.round(n.sliderSize),Math.round(n.width*.5)))),r=t.computed(()=>Math.round(Math.max(Math.min(n.scale,2),.2)*52.5+6)),p=t.computed(()=>{const{startWidth:s,newX:e,startX:i}=o,a=s+e-i;return a<h.value?h.value:a>n.width?n.width:a}),o=t.reactive({mouseDown:!1,startWidth:50,startX:0,newX:0,pinX:0,pinY:0,loading:!1,isCanSlide:!1,error:!1,infoBoxShow:!1,infoText:"",infoBoxFail:!1,timer1:void 0,closeDown:!1,isSuccess:!1,imgIndex:-1,isSubmting:!1}),V=t.ref(null),X=t.ref(null),b=t.ref(null),N=t.ref(null);t.watch(()=>n.show,s=>{s&&y()}),t.onMounted(()=>{document.addEventListener("mousemove",S,!1),document.addEventListener("mouseup",_,!1),document.addEventListener("touchmove",S,{passive:!1}),document.addEventListener("touchend",_,!1),document.body.classList.add("vue-puzzle-overflow"),n.show&&y()}),t.onBeforeUnmount(()=>{document.removeEventListener("mousemove",S,!1),document.removeEventListener("mouseup",_,!1),document.removeEventListener("touchmove",S,!1),document.removeEventListener("touchend",_,!1),document.body.classList.remove("vue-puzzle-overflow")});const W=()=>{o.mouseDown||(clearTimeout(o.timer1),M("close"))},v=()=>{o.closeDown=!0},B=()=>{o.closeDown&&W(),o.closeDown=!1},D=s=>{o.isCanSlide&&(o.mouseDown=!0,o.startWidth=V.value.clientWidth,o.newX=s.clientX||s.changedTouches[0].clientX,o.startX=s.clientX||s.changedTouches[0].clientX)},S=s=>{o.mouseDown&&(s.preventDefault(),o.newX=s.clientX||s.changedTouches[0].clientX)},_=()=>{o.mouseDown&&(o.mouseDown=!1,j())},$=s=>{var g,f,u;if(o.loading&&!s)return;o.loading=!0,o.isCanSlide=!1;const e=(g=X.value)==null?void 0:g.getContext("2d"),i=(f=b.value)==null?void 0:f.getContext("2d"),a=(u=N.value)==null?void 0:u.getContext("2d"),m=navigator.userAgent.indexOf("Firefox")>=0&&navigator.userAgent.indexOf("Windows")>=0,d=document.createElement("img");if(e.fillStyle="rgba(255,255,255,1)",a.fillStyle="rgba(255,255,255,1)",e.clearRect(0,0,n.width,n.height),i.clearRect(0,0,n.width,n.height),o.pinX=l(r.value,n.width-r.value-20),o.pinY=l(r.value,n.height-r.value-20),d.crossOrigin="anonymous",d.onload=()=>{const[c,T,E,z]=U(d);e.save(),x(e),e.closePath(),m?(e.clip(),e.save(),e.shadowOffsetX=0,e.shadowOffsetY=0,e.shadowColor="#000",e.shadowBlur=3,e.fill(),e.restore()):(e.shadowOffsetX=0,e.shadowOffsetY=0,e.shadowColor="#000",e.shadowBlur=3,e.fill(),e.clip()),e.drawImage(d,c,T,E,z),a.fillRect(0,0,n.width,n.height),a.drawImage(d,c,T,E,z),e.globalCompositeOperation="source-atop",x(e),e.arc(o.pinX+Math.ceil(r.value/2),o.pinY+Math.ceil(r.value/2),r.value,0,Math.PI*2),e.closePath(),e.shadowColor="rgba(255, 255, 255, .8)",e.shadowOffsetX=-1,e.shadowOffsetY=-1,e.shadowBlur=Math.min(Math.ceil(8*n.scale),12);const H=e.getImageData(o.pinX-3,o.pinY-20,o.pinX+r.value+5,o.pinY+r.value+5);i.putImageData(H,0,o.pinY-20),e.restore(),e.clearRect(0,0,n.width,n.height),e.save(),x(e),e.globalAlpha=.8,e.fillStyle="#ffffff",e.fill(),e.restore(),e.save(),e.globalCompositeOperation="source-atop",x(e),e.arc(o.pinX+Math.ceil(r.value/2),o.pinY+Math.ceil(r.value/2),r.value*1.2,0,Math.PI*2,!0),e.shadowColor="#000",e.shadowOffsetX=2,e.shadowOffsetY=2,e.shadowBlur=16,e.fill(),e.restore(),e.save(),e.globalCompositeOperation="destination-over",e.drawImage(d,c,T,E,z),e.restore(),o.loading=!1,o.isCanSlide=!0},d.onerror=()=>{$(!0)},!s&&n.images&&n.images.length){let c=l(0,n.images.length-1);c===o.imgIndex&&(c===n.images.length-1?c=0:c++),o.imgIndex=c,d.src=n.images[c]}else d.src=A()},A=()=>{const s=document.createElement("canvas"),e=s.getContext("2d"),{width:i,height:a}=n;s.width=i,s.height=a,e.fillStyle=`rgb(${l(100,255)},${l(100,255)},${l(100,255)})`,e.fillRect(0,0,i,a);for(let m=0;m<12;m++)if(e.fillStyle=`rgb(${l(100,255)},${l(100,255)},${l(100,255)})`,e.strokeStyle=`rgb(${l(100,255)},${l(100,255)},${l(100,255)})`,l(0,2)>1)e.save(),e.rotate(l(-90,90)*Math.PI/180),e.fillRect(l(-20,s.width-20),l(-20,s.height-20),l(10,s.width/2+10),l(10,s.height/2+10)),e.restore();else{e.beginPath();const d=l(-Math.PI,Math.PI);e.arc(l(0,s.width),l(0,s.height),l(10,s.height/2+10),d,d+Math.PI*1.5),e.closePath(),e.fill()}return s.toDataURL("image/png")},x=s=>{const e=Math.ceil(15*n.scale);s.beginPath();const{pinX:i,pinY:a}=o;s.moveTo(i,a),s.lineTo(i+e,a),s.arcTo(i+e,a-e/2,i+e+e/2,a-e/2,e/2),s.arcTo(i+e+e,a-e/2,i+e+e,a,e/2),s.lineTo(i+e+e+e,a),s.lineTo(i+e+e+e,a+e),s.arcTo(i+e+e+e+e/2,a+e,i+e+e+e+e/2,a+e+e/2,e/2),s.arcTo(i+e+e+e+e/2,a+e+e,i+e+e+e,a+e+e,e/2),s.lineTo(i+e+e+e,a+e+e+e),s.lineTo(i,a+e+e+e),s.lineTo(i,a+e+e),s.arcTo(i+e/2,a+e+e,i+e/2,a+e+e/2,e/2),s.arcTo(i+e/2,a+e,i,a+e,e/2),s.lineTo(i,a)},l=(s,e)=>Math.ceil(Math.random()*(e-s)+s),U=s=>{const{width:e,height:i}=n,a=s.width/s.height,m=e/i;let d=0,g=0,f=0,u=0;return a>m?(u=i,f=a*u,g=0,d=(e-f)/2):(f=e,u=f/a,d=0,g=(i-u)/2),[d,g,f,u]},j=()=>{o.isSubmting=!0;const s=Math.abs(o.pinX-(p.value-h.value)+(r.value-h.value)*((p.value-h.value)/(n.width-h.value))-3),{range:e,successText:i}=n;s<e?(o.infoText=i,o.infoBoxFail=!1,o.infoBoxShow=!0,o.isCanSlide=!1,o.isSuccess=!0,clearTimeout(o.timer1),o.timer1=setTimeout(()=>{o.isSubmting=!1,M("success",s)},800)):(o.infoText=n.failText,o.infoBoxFail=!0,o.infoBoxShow=!0,o.isCanSlide=!1,M("fail",s),clearTimeout(o.timer1),o.timer1=setTimeout(()=>{o.isSubmting=!1,y()},800))},q=()=>{o.infoBoxFail=!1,o.infoBoxShow=!1,o.isCanSlide=!1,o.isSuccess=!1,o.startWidth=h.value,o.startX=0,o.newX=0},y=()=>{o.isSubmting||(q(),$())};return(s,e)=>(t.openBlock(),t.createBlock(t.Teleport,{to:n.el},[t.createElementVNode("div",{class:t.normalizeClass(["vue-puzzle-vcode",{show_:C.show}]),onMousedown:v,onMouseup:B,onTouchstart:v,onTouchend:B},[t.createElementVNode("div",{class:"vue-auth-box_",style:t.normalizeStyle({padding:`${n.padding}px`}),onMousedown:e[2]||(e[2]=t.withModifiers(()=>{},["stop"])),onTouchstart:e[3]||(e[3]=t.withModifiers(()=>{},["stop"]))},[t.createElementVNode("div",{class:"auth-body_",style:t.normalizeStyle(`height: ${n.height}px`)},[t.createElementVNode("canvas",{ref_key:"refC1",ref:X,width:n.width,height:n.height,style:t.normalizeStyle(`width:${n.width}px;height:${n.height}px`)},null,12,w),t.createElementVNode("canvas",{ref_key:"refC3",ref:N,class:t.normalizeClass(["auth-canvas3_",{show:o.isSuccess}]),width:n.width,height:n.height,style:t.normalizeStyle(`width:${n.width}px;height:${n.height}px`)},null,14,I),t.createElementVNode("canvas",{width:t.unref(r),class:"auth-canvas2_",height:n.height,ref_key:"refC2",ref:b,style:t.normalizeStyle(`width:${t.unref(r)}px;height:${n.height}px;transform:translateX(${t.unref(p)-t.unref(h)-(t.unref(r)-t.unref(h))*((t.unref(p)-t.unref(h))/(n.width-t.unref(h)))}px)`)},null,12,L),t.createElementVNode("div",{class:t.normalizeClass(["loading-box_",{hide_:!o.loading}])},O,2),t.createElementVNode("div",{class:t.normalizeClass(["info-box_",{show:o.infoBoxShow},{fail:o.infoBoxFail}])},t.toDisplayString(o.infoText),3),t.createElementVNode("div",{class:t.normalizeClass(["flash_",{show:o.isSuccess}]),style:t.normalizeStyle(`transform: translateX(${o.isSuccess?`${n.width+n.height*.578}px`:`-${n.height*.578}px`}) skew(-30deg, 0);`)},null,6),t.createElementVNode("div",{onClick:y},R)],4),t.createElementVNode("div",Y,[t.createElementVNode("div",{class:"range-box",style:t.normalizeStyle(`height:${t.unref(h)}px`)},[t.createElementVNode("div",k,t.toDisplayString(C.sliderText),1),t.createElementVNode("div",{class:"range-slider",ref_key:"refRangeSlider",ref:V,style:t.normalizeStyle(`width:${t.unref(p)}px`)},[t.createElementVNode("div",{class:t.normalizeClass(["range-btn",{isDown:o.mouseDown}]),style:t.normalizeStyle(`width:${t.unref(h)}px`),onMousedown:e[0]||(e[0]=i=>D(i)),onTouchstart:e[1]||(e[1]=i=>D(i))},P,38)],4)],4)])],36)],34)],8,["to"]))}}),ee="";return F});