Particle 粒子动效 #

<template>
  <FDynamicParticle :width="400" :height="400" src="/fast-dataview-ui/tree.png"></FDynamicParticle>
</template>

<template>
  <div>
    <div class="canvas-wrap">
      <FDynamicParticle ref="dynamicParticle" :width="400" :height="400" :src="img"></FDynamicParticle>
    </div>
    <div class="img-list">
      <img v-for="(item,index) in imgList" class="img-list__item" :src="item" @click="clickImg(item)">
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref,reactive } from 'vue';
const dynamicParticle = ref()
let img = ref('/fast-dataview-ui/sun.png')
 
const imgList = reactive([
  '/fast-dataview-ui/sun.png',
  '/fast-dataview-ui/rain.png',
  '/fast-dataview-ui/thunder.png',
  '/fast-dataview-ui/snowflake.png',
])
const clickImg = (src:string) =>{
  dynamicParticle.value.toggleImg(src)
}
</script>
<style>
.canvas-wrap{
  display:flex;
  justify-content: center;
  align-items: center;
}
.img-list{
  display:flex;
  width:100%;
}
.img-list__item{
  width:25%;
  border:1px solid white;
  cursor: pointer;
  box-sizing: border-box;
}
.img-list__item:not(:last-child) {
  border-right-width: 0;
}

</style>