vue3 TS实现动态星空+ref获取for循环的dom元素_vue3获取循环出的dom-优快云博客

本文链接：https://blog.youkuaiyun.com/irisMoon06/article/details/128700489

文章介绍了如何在Vue3中结合TypeScript通过ref获取并操作DOM元素，特别是在一个循环中给每个元素绑定ref，然后在组件挂载后对这些元素进行动画处理，创建出星空的视觉效果。代码示例展示了设置背景、生成星星元素并应用3D变换来让星星动起来的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先说一下如何通过vue3+ts中，如何通过ref获取dom元素

首先给元素绑定ref，与vue2不同的是，ref中是个变量。我获取的for循环的所有dom元素

<div class="stars">
  <div class="star" v-for="(item,index) in starsCount" :key="index" :ref="setBoxRef">
  </div>
</div>

在js中，需要引入ref

import { defineComponent, reactive, toRefs, onMounted, ref, toRaw } from 'vue'

定义ref数组boxRefs

const boxRefs = ref<HTMLElement[]>([])

const setBoxRef = (el: any) => {
            if (el) {
                boxRefs.value.push(el)
            }
        }

 onMounted(() => {
            let that = this;
            let starArr: any[];    //定义一个接收数组
            starArr = boxRefs.value
            console.log(starArr,'-starArr');
        })

接下来是星空源码

首先，在样式的body中，写背景色

<style lang="scss">
body {
  // background: radial-gradient(220% 105% at top center,#0f1727 10%,#3c4975 40%,#244047 65%,#6e8761);
  background: radial-gradient(220% 105% at top center,#1b2947 10%,#75517d 40%,#e96f92 65%,#f7f7b6);

  background-attachment: fixed; 
  // height: 100%;
  // background-color: pink;
}
</style>

然后开始正文：

html：

<template>
  <div class="container">
    <div class="stars">
      <div class="star" v-for="(item,index) in starsCount" :key="index" :ref="setBoxRef">
      </div>
    </div>
  </div>
</template>

ts：

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, ref, toRaw } from 'vue'

export default defineComponent({
  setup(props) {
    const state = reactive({
      starsCount: 800,
      distance: 800
    })
    const boxRefs = ref<HTMLElement[]>([])
    const setBoxRef = (el: any) => {
      if (el) {
        boxRefs.value.push(el)
      }
    }
    onMounted(() => {
      let that = this;
      let starArr: any[];
      starArr = boxRefs.value;
      console.log(starArr,'-starArr');

      starArr.forEach(v => {
        let speed = 0.1 + (Math.random() * 1);
        let thisDistance = state.distance + (Math.random() * 300);
        v.style.transformOrigin = `0 0 ${thisDistance}px`;
        v.style.transform = `
                    translate3d(0,0,-${thisDistance}px)
                    rotateY(${Math.random() * 360}deg) 
                    rotateX(${Math.random() * -50}deg) 
                    scale(${speed} ,${speed})`
      })
    })

    return { ...toRefs(state), setBoxRef }


  },
})
  </script>

css：

<style scoped lang="scss">
@keyframes rotate {
  0% {
  transform: perspective(400px) rotate(20deg) rotateX(-40deg) rotateY(0);
}

100% {
transform: perspective(400px) rotate(20deg) rotateX(-40deg) rotateY(-360deg);
}
}

.stars {
  transform: perspective(500px);
  transform-style: preserve-3d;
  position: absolute;
  perspective-origin: 50% 100%;
  left: 50%;
  animation: rotate 120s infinite linear;
  bottom: 0;
}

.star {
  width: 3px;
  height: 3px;
  background-color: #f7f7b8;
  position: absolute;
  // border-radius: 1px;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  color: #fff;
}
</style>

小星星会动哦～