vue-clock/vue-cloc.umd.js

一个简单的时钟组件

(function(d,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(d=typeof globalThis<"u"?globalThis:d||self,n(d["vue-cloc"]={},d.Vue))})(this,function(d,n){"use strict";const C={class:"clock"},S=[n.createStaticVNode('<div class="outer-clock-face" data-v-87570781><div class="marking marking-one" data-v-87570781></div><div class="marking marking-two" data-v-87570781></div><div class="marking marking-three" data-v-87570781></div><div class="marking marking-four" data-v-87570781></div><div class="inner-clock-face" data-v-87570781><div class="hand hour-hand" data-v-87570781></div><div class="hand min-hand" data-v-87570781></div><div class="hand second-hand" data-v-87570781></div></div></div>',1)],H={name:"Clock"},B=n.defineComponent({...H,setup(u){const c=n.ref(),f=n.ref(),y=n.ref(),M=()=>{let s=[],o=!1,w,a=0,h,m,r,v,l;const k=["#F73859","#14FFEC","#00E0FF","#FF99FE","#FAF15D"],i=document.createElement("canvas");document.body.appendChild(i),i.setAttribute("style","width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; position: fixed; pointer-events: none;");const _=document.createElement("span");_.classList.add("pointer"),document.body.appendChild(_),i.getContext&&window.addEventListener?(l=i.getContext("2d"),b(),window.addEventListener("resize",b,!1),F(),window.addEventListener("mousedown",function(t){E(p(10,20),t.clientX,t.clientY),document.body.classList.add("is-pressed"),w=setTimeout(function(){document.body.classList.add("is-longpress"),o=!0},500)},!1),window.addEventListener("mouseup",function(t){clearInterval(w),o==!0&&(document.body.classList.remove("is-longpress"),E(p(50+Math.ceil(a),100+Math.ceil(a)),t.clientX,t.clientY),o=!1),document.body.classList.remove("is-pressed")},!1),window.addEventListener("mousemove",function(t){let e=t.clientX,g=t.clientY;_.style.top=g+"px",_.style.left=e+"px"},!1)):console.log("canvas or addEventListener is unsupported!");function b(){i.width=window.innerWidth*2,i.height=window.innerHeight*2,i.style.width=window.innerWidth+"px",i.style.height=window.innerHeight+"px",l.scale(2,2),h=i.width=window.innerWidth,m=i.height=window.innerHeight,r={x:h/2,y:m/2},v={x:h/2,y:m/2}}class D{constructor(e=r.x,g=r.y){this.x=e,this.y=g,this.angle=Math.PI*2*Math.random(),o==!0?this.multiplier=p(14+a,15+a):this.multiplier=p(6,12),this.vx=(this.multiplier+Math.random()*.5)*Math.cos(this.angle),this.vy=(this.multiplier+Math.random()*.5)*Math.sin(this.angle),this.r=p(8,12)+3*Math.random(),this.color=k[Math.floor(Math.random()*k.length)]}update(){this.x+=this.vx-v.x,this.y+=this.vy-v.y,v.x=-2/window.innerWidth*Math.sin(this.angle),v.y=-2/window.innerHeight*Math.cos(this.angle),this.r-=.3,this.vx*=.9,this.vy*=.9}}function E(t=1,e=r.x,g=r.y){for(let L=0;L<t;L++)s.push(new D(e,g))}function p(t,e){return Math.floor(Math.random()*e)+t}function F(){l.fillStyle="rgba(255, 255, 255, 0)",l.clearRect(0,0,i.width,i.height);for(let t=0;t<s.length;t++){let e=s[t];e.r<0||(l.fillStyle=e.color,l.beginPath(),l.arc(e.x,e.y,e.r,0,Math.PI*2,!1),l.fill(),e.update())}o==!0?a+=.2:!o&&a>=0&&(a-=.4),I(),requestAnimationFrame(F)}function I(){for(let t=0;t<s.length;t++){let e=s[t];(e.x+e.r<0||e.x-e.r>h||e.y+e.r<0||e.y-e.r>m||e.r<0)&&s.splice(t,1)}}};return n.onMounted(()=>{c.value=document.querySelector(".second-hand"),f.value=document.querySelector(".min-hand"),y.value=document.querySelector(".hour-hand"),setInterval(()=>{const s=new Date,o=s.getSeconds(),w=o/60*360+90;c.value.style.transform=`rotate(${w}deg)`;const a=s.getMinutes(),h=a/60*360+o/60*6+90;f.value.style.transform=`rotate(${h}deg)`;const r=s.getHours()/12*360+a/60*30+90;y.value.style.transform=`rotate(${r}deg)`},1e3),M()}),(s,o)=>(n.openBlock(),n.createElementBlock("div",C,S))}}),W="",x=((u,c)=>{const f=u.__vccOpts||u;for(const[y,M]of c)f[y]=M;return f})(B,[["__scopeId","data-v-87570781"]]),P=[x],q={install(u){P.forEach(c=>{u.component(c.name,x)})}};d.Clock=x,d.default=q,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});