common-lottery/dist/common-lottery.umd.js

A Vue 3 lottery component

(function(u,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(u=typeof globalThis<"u"?globalThis:u||self,e(u.CommonLottery={},u.Vue))})(this,function(u,e){"use strict";const b={class:"lottery-container"},T={class:"lottery-wheel-wrapper"},$=["href","x","y"],z=["d","fill"],V=["x","y","transform"],N=["disabled"],C=2,v=3e3,q=e.defineComponent({__name:"common-lottery",props:{lotteryConfig:{},winningId:{}},emits:["start","end","update:winningId","stopped"],setup(p,{expose:E,emit:A}){const y=p,h=A,r=e.ref(!1),f=e.ref(!1),i=e.ref(0);let d=null,s=8,w=!1,m=null,k=null,P=null,g=null,S=null;const a=e.computed(()=>[...y.lotteryConfig.prizeList]),R=["#FFD700","#FFB347","#FF6961","#77DD77","#AEC6CF","#CBAACB","#B39EB5","#779ECB","#FFB7B2","#FFDAC1","#E2F0CB","#B5EAD7","#C7CEEA","#FF9AA2","#FFCCF9","#B5B9FF","#D5AAFF","#A0E7E5","#FFAEBC","#A0E7E5"],x=e.computed(()=>360/a.value.length),W=e.computed(()=>({transform:`rotate(${i.value}deg)`,transition:"none"}));function j(o,t){const l=2*Math.PI/t,n=o*l-Math.PI/2,_=n+l,c=180,D=200+c*Math.cos(n),I=200+c*Math.sin(n),F=200+c*Math.cos(_),B=200+c*Math.sin(_);return`M200,200 L${D},${I} A${c},${c} 0 0,1 ${F},${B} Z`}const O=e.computed(()=>{const o=a.value.length;let t=18;return o>16?t=10:o>8&&(t=14),{fontSize:t+"px",fontWeight:"bold",userSelect:"none"}});function U(){r.value||(r.value=!0,f.value=!1,d&&clearInterval(d),m&&cancelAnimationFrame(m),s=8,w=!1,d=window.setInterval(()=>{i.value=(i.value+s)%360,s<12&&(s+=.1)},16),h("update:winningId",void 0),h("start"))}function Y(){!r.value||f.value||(f.value=!0,w=!0,d&&clearInterval(d),P=s,k=performance.now(),g=null,S&&clearTimeout(S),Z(),S=window.setTimeout(()=>{g?(L(g),g=null):s=C},v),h("end"))}function Z(){function o(){if(!w)return;const t=performance.now(),l=t-(k||t);if(l<v){const n=l/v;s=(P||8)-((P||8)-C)*n}else s=C;i.value=(i.value+s)%360,m=requestAnimationFrame(o)}o()}function G(){r.value?f.value||Y():U()}e.watch(()=>y.winningId,o=>{if(!r.value||!f.value||!o)return;const t=performance.now();t-(k||t)<v?g=o:L(o)});function L(o){w=!1,m&&cancelAnimationFrame(m);const t=a.value.findIndex(F=>F.id===o);if(t===-1)return;const l=360-(t*x.value+x.value/2);let n=i.value%360,_=(l-n+360)%360,c=_/s*16;const D=performance.now();function I(F){const B=F-D;if(B>=c){i.value=l,r.value=!1,f.value=!1,h("stopped");return}const J=B/c;i.value=n+_*J,requestAnimationFrame(I)}requestAnimationFrame(I)}function H(){r.value=!1,f.value=!1,i.value=0,d&&clearInterval(d),m&&cancelAnimationFrame(m),s=8,w=!1,g=null}return E({reset:H}),(o,t)=>(e.openBlock(),e.createElementBlock("div",b,[e.createElementVNode("div",T,[t[1]||(t[1]=e.createElementVNode("div",{class:"lottery-pointer"},null,-1)),(e.openBlock(),e.createElementBlock("svg",{class:"lottery-wheel",style:e.normalizeStyle(W.value),viewBox:"0 0 400 400",width:"100%",height:"100%",preserveAspectRatio:"xMidYMid meet"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.value,(l,n)=>(e.openBlock(),e.createElementBlock("g",{key:l.id},[l.iconUrl?(e.openBlock(),e.createElementBlock("image",{key:0,href:l.iconUrl,x:200+110*Math.cos((n+.5)*2*Math.PI/a.value.length-Math.PI/2)-20,y:200+110*Math.sin((n+.5)*2*Math.PI/a.value.length-Math.PI/2)-40,width:"40",height:"40",style:{"pointer-events":"none"}},null,8,$)):e.createCommentVNode("",!0),e.createElementVNode("path",{d:j(n,a.value.length),fill:R[n%20],stroke:"#fff","stroke-width":"2"},null,8,z),e.createElementVNode("text",{x:200+110*Math.cos((n+.5)*2*Math.PI/a.value.length-Math.PI/2),y:200+110*Math.sin((n+.5)*2*Math.PI/a.value.length-Math.PI/2),"text-anchor":"middle","alignment-baseline":"middle",transform:`rotate(${(n+.5)*360/a.value.length},${200+110*Math.cos((n+.5)*2*Math.PI/a.value.length-Math.PI/2)},${200+110*Math.sin((n+.5)*2*Math.PI/a.value.length-Math.PI/2)})`,class:"prize-name",style:e.normalizeStyle(O.value)},e.toDisplayString(l.name),13,V)]))),128)),t[0]||(t[0]=e.createElementVNode("circle",{cx:"200",cy:"200",r:"30",fill:"#fff",stroke:"#eee","stroke-width":"4"},null,-1))],4))]),e.createElementVNode("button",{class:e.normalizeClass(["lottery-button",{running:r.value}]),onClick:G,disabled:!y.lotteryConfig.canLottery},e.toDisplayString(r.value?"结束抽奖":"点击抽奖"),11,N)]))}}),K="",M=((p,E)=>{const A=p.__vccOpts||p;for(const[y,h]of E)A[y]=h;return A})(q,[["__scopeId","data-v-efb40495"]]);M.install=p=>{p.component("CommonLottery",M)},u.CommonLottery=M,u.default=M,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});