vue3实现静态轮盘时钟效果

要实现静态轮盘时钟效果，可以使用Vue3的组件化和动画特性。以下是一个简单的实现方式：

1. 创建一个Clock组件，包含一个圆形的容器和时钟指针。

<template>
  <div class="clock">
    <div class="clock__face">
      <div class="clock__hand"></div>
    </div>
  </div>
</template>

<style>
.clock {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #f2f2f2;
}

.clock__face {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background-color: #333;
}

.clock__hand {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 50%;
  margin: -25% 0 0 -1px;
  background-color: #333;
  transform-origin: bottom center;
}
</style>

2. 在组件中使用Vue3的生命周期钩子函数和计算属性来更新时钟指针的位置。

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

export default {
  setup() {
    const seconds = ref(0);

    onMounted(() => {
      setInterval(() => {
        seconds.value = new Date().getSeconds();
      }, 1000);
    });

    const rotation = computed(() => {
      return `rotate(${seconds.value * 6}deg)`;
    });

    return {
      seconds,
      rotation,
    };
  },
};
</script>

3. 在时钟指针元素上绑定动画效果。

<div class="clock__hand" :style="{ transform: rotation, transition: 'transform 0.5s ease-in-out' }"></div>

现在，当Clock组件被渲染时，时钟指针会根据当前的秒数进行旋转，并且有一个平滑的动画效果。