vue3+ts点击实现小球抛物线

实现小球抛物线的效果，可以使用 Vue3 和 TypeScript 结合使用，具体实现步骤如下：

1. 创建一个小球组件 Ball.vue，定义小球的初始位置和速度：

<template>
  <div :style="{left: x + 'px', top: y + 'px'}" class="ball"></div>
</template>

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

export default defineComponent({
  setup() {
    const x = ref(0) // 小球初始位置x
    const y = ref(0) // 小球初始位置y
    const vx = ref(0) // 小球x方向速度
    const vy = ref(0) // 小球y方向速度
    const g = ref(0.1) // 重力加速度

    // 计算小球下一帧位置
    const move = () => {
      x.value += vx.value
      y.value += vy.value
      vy.value += g.value
    }

    onMounted(() => {
      // 点击事件触发小球抛物线运动
      const ball = document.querySelector('.ball')
      ball?.addEventListener('click', () => {
        x.value = 20
        y.value = 20
        vx.value = 5
        vy.value = 0
        const timer = setInterval(() => {
          move()
          if (y.value > 400) {
            clearInterval(timer)
          }
        }, 20)
      })
    })

    return {
      x,
      y
    }
  }
})
</script>

<style scoped>
.ball {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: red;
}
</style>

2. 在父组件中引入小球组件，并在页面上显示：

<template>
  <div class="container">
    <ball></ball>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Ball from './Ball.vue'

export default defineComponent({
  components: {
    Ball
  }
})
</script>

<style>
.container {
  position: relative;
  width: 500px;
  height: 500px;
  border: 1px solid #ccc;
}
</style>

这样，当用户点击小球时，小球会向右方运动，并按照抛物线轨迹下落，最终落地。可以通过调整小球的初始位置、速度、重力加速度等参数来调整小球的运动轨迹。