建立指令的形式调整动画

src/components/change.js

@@ -0,0 +1,27 @@
+const directive ={
+    //
+    inserted(el,bindding){  
+        console.log("DIAOMAO,你能看到我")
+        console.log(el,bindding)
+        let count =0 ;//init val
+        let num = el.innerText // 获取页面的值
+        let rate  = 30 //定时器时间间隔
+        let average = num/(bindding.value/rate); // 每次定时器跳动的值
+        //
+        const timer = setInterval(()=>{
+            //
+            count += average
+            el.innerText = count.toFixed(0)
+
+            if(count>num) {
+                count=num
+                el.innerText = count
+                //
+                clearInterval(timer)
+            }
+        },rate);
+
+    },
+}
+
+export default directive;

src/main.js

@@ -1,16 +1,18 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
-import store from './store'
 
 //axios
 import axios from 'axios'
+import directive from './components/change'
 
 const app = createApp(App)
 app.use(router)
 app.provide('$axios', axios)
 app.mount("#app")
 
+app.directive("change",directive)
+app.config.productionTip =false
 // createApp(App).use(store)
 // .use(router)
 // .mount('#app')

src/views/HomeView.vue

@@ -641,11 +641,7 @@ export default {
         that.day_num = tmpdata.day.noRepeatInNum
         that.week_num = tmpdata.week.noRepeatInNum
         that.mon_num = tmpdata.month.noRepeatInNum
-        that.year_num = tmpdata.year.noRepeatInNum
-        // 增加数字动画效果
-        numGrow(ycdn,tmpdata.day.noRepeatInNum)
-        
-
+        // that.year_num = tmpdata.year.noRepeatInNum
       });
     },