iking-slider-valid/dist/ikingslidervalid.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.IkingSliderValid=w(t.Vue))})(this,function(t){"use strict";const w=["width","height"],A=["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("path",{d:"M512 85.312c108.544 0 206.272 40.512 280.64 107.008l49.536-49.28a42.88 42.88 0 0 1 6.4-6.08l-2.048 1.792a31.936 31.936 0 0 1 9.664-6.592 42.688 42.688 0 0 1 61.12 38.528v170.624a42.688 42.688 0 0 1-42.752 42.688h-18.88a42.496 42.496 0 0 1-4.928-0.064h-10.88l-117.44-0.384h-18.56a42.688 42.688 0 0 1-38.4-61.12 30.208 30.208 0 0 1 7.04-10.688l59.52-59.136A333.44 333.44 0 0 0 512 170.688 341.312 341.312 0 0 0 170.688 512a42.688 42.688 0 1 1-85.376 0A426.688 426.688 0 0 1 512 85.312z",fill:"var(--ik-color-primary, #029ef7)","p-id":"7292"},null,-1),t.createElementVNode("path",{d:"M896 469.312c23.552 0 42.688 19.136 42.688 42.688A426.688 426.688 0 0 1 512 938.688a418.304 418.304 0 0 1-280.384-106.816l-53.184 53.056a31.936 31.936 0 0 1-9.344 6.4l-1.792 0.704a42.688 42.688 0 0 1-60.672-38.72v-170.624a42.688 42.688 0 0 1 42.88-42.688H168.32a42.496 42.496 0 0 1 4.928 0.064h4.992l114.176 0.384h27.712a42.688 42.688 0 0 1 29.696 73.216 25.152 25.152 0 0 1-2.432 2.752l-55.232 55.04A333.44 333.44 0 0 0 512 853.44 341.312 341.312 0 0 0 853.312 512c0-23.552 19.136-42.688 42.688-42.688z",fill:"var(--ik-color-icon-light-hover, #73c9fa)","p-id":"7293"},null,-1)],Y=[t.createElementVNode("path",{d:"M853.312 170.688a60.352 60.352 0 0 1 0 85.312L256 853.312A60.352 60.352 0 1 1 170.688 768L768 170.688a60.352 60.352 0 0 1 85.312 0z",fill:"var(--ik-color-primary, #029ef7)","p-id":"7450"},null,-1),t.createElementVNode("path",{d:"M170.688 170.688a60.352 60.352 0 0 1 85.312 0L853.312 768A60.352 60.352 0 1 1 768 853.312L170.688 256a60.352 60.352 0 0 1 0-85.312z",fill:"var(--ik-color-icon-light-hover, #73c9fa)","p-id":"7451"},null,-1)],P={class:"auth-control_"},W={class:"range-text"},F=[t.createElementVNode("div",null,null,-1),t.createElementVNode("div",null,null,-1),t.createElementVNode("div",null,null,-1)],U=t.defineComponent({__name:"iking-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","update:show"],setup(C,{emit:E}){const i=C,j=()=>navigator.userAgent.includes("Windows"),c=t.computed(()=>Math.max(Math.min(Math.round(i.sliderSize),Math.round(i.width*.5)))),r=t.computed(()=>Math.round(Math.max(Math.min(i.scale,2),.2)*52.5+6)),p=t.computed(()=>{const{startWidth:s,newX:e,startX:n}=o,l=s+e-n;return l<c.value?c.value:l>i.width?i.width:l}),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}),z=t.ref(null),V=t.ref(null),B=t.ref(null),b=t.ref(null);t.watch(()=>i.show,s=>{s&&y()}),t.onMounted(()=>{document.addEventListener("mousemove",_,!1),document.addEventListener("mouseup",S,!1),document.addEventListener("touchmove",_,{passive:!1}),document.addEventListener("touchend",S,!1),document.body.classList.add("vue-puzzle-overflow"),i.show&&y()}),t.onBeforeUnmount(()=>{document.removeEventListener("mousemove",_,!1),document.removeEventListener("mouseup",S,!1),document.removeEventListener("touchmove",_,!1),document.removeEventListener("touchend",S,!1),document.body.classList.remove("vue-puzzle-overflow")});const N=()=>{o.mouseDown||(clearTimeout(o.timer1),E("close"))},X=()=>{j||(o.closeDown=!0)},D=()=>{o.closeDown&&N(),o.closeDown=!1},$=s=>{o.isCanSlide&&(o.mouseDown=!0,o.startWidth=z.value.clientWidth,o.newX=s.clientX||s.changedTouches[0].clientX,o.startX=s.clientX||s.changedTouches[0].clientX)},_=s=>{o.mouseDown&&(s.preventDefault(),o.newX=s.clientX||s.changedTouches[0].clientX)},S=()=>{o.mouseDown&&(o.mouseDown=!1,G())},k=s=>{var g,f,u;if(o.loading&&!s)return;o.loading=!0,o.isCanSlide=!1;const e=(g=V.value)==null?void 0:g.getContext("2d"),n=(f=B.value)==null?void 0:f.getContext("2d"),l=(u=b.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)",l.fillStyle="rgba(255,255,255,1)",e.clearRect(0,0,i.width,i.height),n.clearRect(0,0,i.width,i.height),o.pinX=a(r.value,i.width-r.value-20),o.pinY=a(r.value,i.height-r.value-20),d.crossOrigin="anonymous",d.onload=()=>{const[h,M,T,v]=H(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,h,M,T,v),l.fillRect(0,0,i.width,i.height),l.drawImage(d,h,M,T,v),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*i.scale),12);const K=e.getImageData(o.pinX-3,o.pinY-20,o.pinX+r.value+5,o.pinY+r.value+5);n.putImageData(K,0,o.pinY-20),e.restore(),e.clearRect(0,0,i.width,i.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,h,M,T,v),e.restore(),o.loading=!1,o.isCanSlide=!0},d.onerror=()=>{k(!0)},!s&&i.images&&i.images.length){let h=a(0,i.images.length-1);h===o.imgIndex&&(h===i.images.length-1?h=0:h++),o.imgIndex=h,d.src=i.images[h]}else d.src=q()},q=()=>{const s=document.createElement("canvas"),e=s.getContext("2d"),{width:n,height:l}=i;s.width=n,s.height=l,e.fillStyle=`rgb(${a(100,255)},${a(100,255)},${a(100,255)})`,e.fillRect(0,0,n,l);for(let m=0;m<12;m++)if(e.fillStyle=`rgb(${a(100,255)},${a(100,255)},${a(100,255)})`,e.strokeStyle=`rgb(${a(100,255)},${a(100,255)},${a(100,255)})`,a(0,2)>1)e.save(),e.rotate(a(-90,90)*Math.PI/180),e.fillRect(a(-20,s.width-20),a(-20,s.height-20),a(10,s.width/2+10),a(10,s.height/2+10)),e.restore();else{e.beginPath();const d=a(-Math.PI,Math.PI);e.arc(a(0,s.width),a(0,s.height),a(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*i.scale);s.beginPath();const{pinX:n,pinY:l}=o;s.moveTo(n,l),s.lineTo(n+e,l),s.arcTo(n+e,l-e/2,n+e+e/2,l-e/2,e/2),s.arcTo(n+e+e,l-e/2,n+e+e,l,e/2),s.lineTo(n+e+e+e,l),s.lineTo(n+e+e+e,l+e),s.arcTo(n+e+e+e+e/2,l+e,n+e+e+e+e/2,l+e+e/2,e/2),s.arcTo(n+e+e+e+e/2,l+e+e,n+e+e+e,l+e+e,e/2),s.lineTo(n+e+e+e,l+e+e+e),s.lineTo(n,l+e+e+e),s.lineTo(n,l+e+e),s.arcTo(n+e/2,l+e+e,n+e/2,l+e+e/2,e/2),s.arcTo(n+e/2,l+e,n,l+e,e/2),s.lineTo(n,l)},a=(s,e)=>Math.ceil(Math.random()*(e-s)+s),H=s=>{const{width:e,height:n}=i,l=s.width/s.height,m=e/n;let d=0,g=0,f=0,u=0;return l>m?(u=n,f=l*u,g=0,d=(e-f)/2):(f=e,u=f/l,d=0,g=(n-u)/2),[d,g,f,u]},G=()=>{o.isSubmting=!0;const s=Math.abs(o.pinX-(p.value-c.value)+(r.value-c.value)*((p.value-c.value)/(i.width-c.value))-3),{range:e,successText:n}=i;s<e?(o.infoText=n,o.infoBoxFail=!1,o.infoBoxShow=!0,o.isCanSlide=!1,o.isSuccess=!0,clearTimeout(o.timer1),o.timer1=setTimeout(()=>{o.isSubmting=!1,E("success",s)},800)):(o.infoText=i.failText,o.infoBoxFail=!0,o.infoBoxShow=!0,o.isCanSlide=!1,E("fail",s),clearTimeout(o.timer1),o.timer1=setTimeout(()=>{o.isSubmting=!1,y()},800))},I=()=>{o.infoBoxFail=!1,o.infoBoxShow=!1,o.isCanSlide=!1,o.isSuccess=!1,o.startWidth=c.value,o.startX=0,o.newX=0},y=()=>{o.isSubmting||(I(),k())},J=()=>{o.isSubmting||(I(),N())};return(s,e)=>(t.openBlock(),t.createBlock(t.Teleport,{to:i.el},[t.createElementVNode("div",{class:t.normalizeClass(["vue-puzzle-vcode",{show_:C.show}]),onMousedown:X,onMouseup:D,onTouchstart:X,onTouchend:D},[t.createElementVNode("div",{class:"vue-auth-box_",style:t.normalizeStyle({padding:`${i.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: ${i.height}px`)},[t.createElementVNode("canvas",{ref_key:"refC1",ref:V,width:i.width,height:i.height,style:t.normalizeStyle(`width:${i.width}px;height:${i.height}px`)},null,12,w),t.createElementVNode("canvas",{ref_key:"refC3",ref:b,class:t.normalizeClass(["auth-canvas3_",{show:o.isSuccess}]),width:i.width,height:i.height,style:t.normalizeStyle(`width:${i.width}px;height:${i.height}px`)},null,14,A),t.createElementVNode("canvas",{width:t.unref(r),class:"auth-canvas2_",height:i.height,ref_key:"refC2",ref:B,style:t.normalizeStyle(`width:${t.unref(r)}px;height:${i.height}px;transform:translateX(${t.unref(p)-t.unref(c)-(t.unref(r)-t.unref(c))*((t.unref(p)-t.unref(c))/(i.width-t.unref(c)))}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?`${i.width+i.height*.578}px`:`-${i.height*.578}px`}) skew(-30deg, 0);`)},null,6),t.createElementVNode("div",null,[(t.openBlock(),t.createElementBlock("svg",{onClick:y,t:"1711695060046",class:"icon reset_",viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","p-id":"7291",width:"200",height:"200"},R))]),(t.openBlock(),t.createElementBlock("svg",{onClick:J,t:"1711695359414",class:"icon reset_ close",viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","p-id":"7449",width:"200",height:"200"},Y))],4),t.createElementVNode("div",P,[t.createElementVNode("div",{class:"range-box",style:t.normalizeStyle(`height:${t.unref(c)}px`)},[t.createElementVNode("div",W,t.toDisplayString(C.sliderText),1),t.createElementVNode("div",{class:"range-slider",ref_key:"refRangeSlider",ref:z,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(c)}px`),onMousedown:e[0]||(e[0]=n=>$(n)),onTouchstart:e[1]||(e[1]=n=>$(n))},F,38)],4)],4)])],36)],34)],8,["to"]))}}),le="";return U});