UNPKG

hy-starry-sky

Version:

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

2 lines (1 loc) 1.38 kB
(function(r,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(r=typeof globalThis<"u"?globalThis:r||self,t(r.HyStarrySky={},r.Vue))})(this,function(r,t){"use strict";const y=(e,n)=>{const s=e.__vccOpts||e;for(const[c,o]of n)s[c]=o;return s},f={class:"starry-sky-bg"},_={class:"stars"},l=y({__name:"hy-starry-sky",props:{starsCount:{type:[Number,String],default:()=>800},distance:{type:[Number,String],default:()=>800}},setup(e){const n=e,s=t.ref();return t.onMounted(()=>{s.value.forEach(o=>{let a=.1+Math.random()*1,i=n.distance+Math.random()*300;o.style.transformOrigin=`0 0 ${i}px`,o.style.transform=`translate3d(0,0,-${i}px) rotateY(${Math.random()*360}deg) rotateX(${Math.random()*-50}deg) scale(${a},${a})`})}),(c,o)=>(t.openBlock(),t.createElementBlock("div",f,[t.createElementVNode("div",_,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.starsCount,a=>(t.openBlock(),t.createElementBlock("div",{key:a,class:"star",ref_for:!0,ref_key:"star",ref:s}))),128))])]))}},[["__scopeId","data-v-562fe1eb"]]);l.__name="HyStarrySky";const d={install:e=>{e.component("HyStarrySky",l)}},p=[d],u={install:e=>{p.forEach(n=>{e.component(n.__name,n)})}};r.HyStarrySky=d,r.default=u,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});