基本组件代码

先把最基础的组件代码样式写出来，其实无非就是四个部分：

1、圆形水缸
2、水波
2、百分比数字
3、进度条

我们先把圆形水缸、百分比数字、进度条画出来，水波待会再画

可以看到初步效果已经出来了~

水波效果

最重点的就是水波，其实这个水波就是个障眼法罢了，我画张图你们就懂了，其实就是一个圆角正方形，一直在旋转和上升下降，让用户有一种水波的视觉感~

所以我们可以画一个圆角正方形，并且让他一直旋转即可

并且我们要让这个水波效果，随着百分比的增加而上升，随着百分比的减少而下降，所以得监听百分比

现在可以发现已经有水波效果了

但是感觉水溢出来了，所以需要给水缸设置一下溢出隐藏

最终实现效果

完整代码

 1<template>
 2  <div class="wave-container">
 3    <!-- 水缸 -->
 4    <div class="main">
 5      <!-- 百分比数字 -->
 6      <div class="main-number">{{ percent }}</div>
 7      <!-- 水波效果 -->
 8      <div ref="wave" class="wave"></div>
 9    </div>
10    <!-- 进度条 -->
11    <Slider v-model:value="percent" class="percent-bar" :tipFormatter="null" />
12  </div>
13</template>
14
15<script setup lang="ts">
16import { ref, watch } from 'vue';
17import { Slider } from 'ant-design-vue';
18
19const percent = ref(0);
20
21const wave = ref<HTMLDivElement | null>(null);
22
23// 监听百分比，计算 top
24watch(
25  percent,
26  v => {
27    const waveEle = wave.value;
28    if (waveEle) {
29      waveEle.style.top = `${200 * (1 - v / 100)}px`;
30    }
31  },
32  {
33    immediate: true,
34  },
35);
36</script>
37
38<style scoped lang="less">
39.wave-container {
40  display: flex;
41  flex-direction: column;
42  align-items: center;
43
44  .main {
45    position: relative;
46    width: 200px;
47    height: 200px;
48    border-radius: 50%;
49    background: #fff;
50    border: #fff solid 5px;
51    display: flex;
52    justify-content: center;
53    align-items: center;
54    // 增加样式隐藏溢出
55    overflow: hidden;
56
57    .main-number {
58      font-size: 100px;
59      z-index: 1;
60      user-select: none;
61    }
62  }
63
64  @keyframes rotateAnimation {
65    from {
66      transform: rotate(0deg);
67    }
68    to {
69      transform: rotate(360deg);
70    }
71  }
72
73  .wave {
74    position: absolute;
75    top: 200px;
76    width: 400px;
77    height: 400px;
78    background: rgb(168, 168, 231);
79    border-radius: 40%;
80    animation: rotateAnimation 2s linear infinite;
81  }
82
83  .percent-bar {
84    width: 200px;
85    background: #fff;
86  }
87}
88</style>