From 1adc64fab618fee246dbbe602bc6ed7553e06e44 Mon Sep 17 00:00:00 2001
From: haoxr <1490493387@qq.com>
Date: Wed, 1 Mar 2023 21:58:11 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BD=BF=E7=94=A8VueUse=E7=9A=84us?=
 =?UTF-8?q?eTransition=E5=87=BD=E6=95=B0=E6=9B=BF=E6=8D=A2vue-countup-v3?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: 5295b103fc91e2c205f1f16c286a2c83e8ad97dc
---
 package.json                  |  2 --
 src/views/dashboard/index.vue | 48 ++++++++++++++++++++++++++++++-----
 2 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 3ff52cf7..e30adf26 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,6 @@
     "@wangeditor/editor": "^5.0.0",
     "@wangeditor/editor-for-vue": "^5.1.10",
     "axios": "^1.2.2",
-    "default-passive-events": "^2.0.0",
     "echarts": "^5.2.2",
     "element-plus": "^2.2.32",
     "js-cookie": "^3.0.1",
@@ -27,7 +26,6 @@
     "screenfull": "^6.0.0",
     "sortablejs": "^1.14.0",
     "vue": "^3.2.45",
-    "vue-countup-v3": "^1.1.0",
     "vue-i18n": "^9.1.9",
     "vue-router": "^4.1.6"
   },
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 896eef68..3114f79f 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -3,15 +3,15 @@ export default { name: 'Dashboard' };
 </script>
 
 <script setup lang="ts">
+import { useUserStore } from '@/store/modules/user';
+import { useTransition, TransitionPresets } from '@vueuse/core';
+
 import GithubCorner from '@/components/GithubCorner/index.vue';
 import SvgIcon from '@/components/SvgIcon/index.vue';
 import BarChart from './components/BarChart.vue';
 import PieChart from './components/PieChart.vue';
 import RadarChart from './components/RadarChart.vue';
 
-import CountUp from 'vue-countup-v3';
-import { useUserStore } from '@/store/modules/user';
-
 const userStore = useUserStore();
 
 const date: Date = new Date();
@@ -29,6 +29,40 @@ const greetings = computed(() => {
     return '偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！';
   }
 });
+
+const duration = 5000;
+
+// 收入金额
+const amount = ref(0);
+const amountOutput = useTransition(amount, {
+  duration: duration,
+  transition: TransitionPresets.easeOutExpo
+});
+amount.value = 2000;
+
+// 访问数
+const visitCount = ref(0);
+const visitCountOutput = useTransition(visitCount, {
+  duration: duration,
+  transition: TransitionPresets.easeOutExpo
+});
+visitCount.value = 2000;
+
+//消息数
+const messageCount = ref(0);
+const messageCountOutput = useTransition(messageCount, {
+  duration: duration,
+  transition: TransitionPresets.easeOutExpo
+});
+messageCount.value = 2000;
+
+// 订单数
+const orderCount = ref(0);
+const orderCountOutput = useTransition(orderCount, {
+  duration: duration,
+  transition: TransitionPresets.easeOutExpo
+});
+orderCount.value = 2000;
 </script>
 
 <template>
@@ -92,7 +126,7 @@ const greetings = computed(() => {
           <div class="flex flex-col space-y-3">
             <div class="text-[var(--el-text-color-secondary)]">访问数</div>
             <div class="text-lg">
-              <count-up :end-val="2000"></count-up>
+              {{ Math.round(visitCountOutput) }}
             </div>
           </div>
         </div>
@@ -109,7 +143,7 @@ const greetings = computed(() => {
           <div class="flex flex-col space-y-3">
             <div class="text-[var(--el-text-color-secondary)]">消息数</div>
             <div class="text-lg">
-              <count-up :end-val="2000"></count-up>
+              {{ Math.round(messageCountOutput) }}
             </div>
           </div>
         </div>
@@ -125,7 +159,7 @@ const greetings = computed(() => {
           <div class="flex flex-col space-y-3">
             <div class="text-[var(--el-text-color-secondary)]">收入金额</div>
             <div class="text-lg">
-              <count-up :end-val="2000"></count-up>
+              {{ Math.round(amountOutput) }}
             </div>
           </div>
         </div>
@@ -140,7 +174,7 @@ const greetings = computed(() => {
           <div class="flex flex-col space-y-3">
             <div class="text-[var(--el-text-color-secondary)]">订单数</div>
             <div class="text-lg">
-              <count-up :end-val="2000"></count-up>
+              {{ Math.round(orderCountOutput) }}
             </div>
           </div>
         </div>