vue3线条条上一个点流动

Vue 3中的Composition API可以实现在组件中实现点的流动效果。你可以使用Vue的响应式系统来追踪点的位置，并通过计算属性或方法来更新点的位置。下面是一个简单的示例：

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

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const point = ref({ x: 0, y: 0 });

    // 在mounted钩子中更新点的位置
    onMounted(() => {
      setInterval(() => {
        point.value.x = Math.random() * window.innerWidth;
        point.value.y = Math.random() * window.innerHeight;
      }, 1000);
    });

    return {
      point,
    };
  },
};
</script>

<style>
.point {
  width: 10px;
  height: 10px;
  background-color: red;
  position: absolute;
}
</style>

在上面的示例中，我们使用了Vue 3的Composition API来定义一个名为`point`的响应式变量，它包含了点的x和y坐标。在组件的`onMounted`钩子中，我们使用`setInterval`函数来定时更新点的位置，通过修改`point.value.x`和`point.value.y`来改变点的坐标。在模板中，我们使用`:style`绑定来动态设置点的位置。