vue实现小球掉落

首先，将小球儿动画代码封装成组件，创建个文件，例如qiu.js

let createBall = (left, top,box) => {
    // 点击事件 const {clientX,clienty} = ev  createBall(clientX,clienty)
    const ball = document.createElement('div');
    ball.style.position = 'absolute';
    ball.style.left = left - 2+ 'px';
    ball.style.top = top - 5 + 'px';
    ball.style.width = '10px';
    ball.style.height = '10px';
    ball.style.borderRadius = '50%';
    ball.style.backgroundColor = 'red';
    ball.style.transition = 'left .6s linear, top .6s cubic-bezier(0.5,-0.5,1,1)';
    document.body.appendChild(ball);
    // 使用 requestAnimationFrame 替代 setTimeout
    requestAnimationFrame(() => {
        ball.style.left = box.getBoundingClientRect().left + box.offsetWidth / 2 + 'px';
        ball.style.top = box.getBoundingClientRect().top + 'px';
    });
    ball.ontransitionend = function () {
        ball.remove();
    };
}
 
//传入两个参数分别为：当前点击的元素、和小球飞入到盒子的元素
const Qiu = (e, Box) => {
    const { clientX, clientY } = e;
    createBall(clientX, clientY, Box)
}
 
export default Qiu;  //导出

接下来就是引入js文件，在使用的vue文件中使用

元素部分

<template>
      <div className='xq-all'>
        <!-- //触发小球儿掉落按钮 -->
      <button className='xq-btn' @click="ev=>onchufa(ev)">点击触发</button> 
      <div className='xq-bottom'>
        <!-- //小球掉落的位置 -->
        <p ref="refs">小球儿</p> 
      </div>
    </div>
</template>

逻辑部分

<script setup>
import {ref} from 'vue'
import Qiu from './qiu.js'  //引入组件
const refs=ref()
    const onchufa=(ev)=>{
        // const { clientX, clientY } = ev;
        Qiu(ev,refs.value) //在此时用组件中的方法
    }

</script>

样式部分

<style lang="less" scoped>
.xq-all{
    .xq-btn{
        float: right;
        margin: 50px 0;
    }
    .xq-bottom{
        height: 45px;
        line-height: 45px;
        width: 100vw;
        // background-color: bisque;
        position: fixed;
        bottom: 200px;
        left: 200px;
        p{
            height: 40px;
            width: 40px;
            background-color: aquamarine;
            margin-left: 30px;
            font-size: 12px;
            position: fixed;
        }
    }
}
</style>

效果展示：

*************