feat: add count-to component and demo

vben
1 parent 4811cce8
Showing 8 changed files with 79 additions and 23 deletions
package.json
src/components/Loading/FullLoading.vue
src/components/Transition/index.ts
src/router/guard/pageLoadingGuard.ts
src/router/menus/modules/demo/comp.ts
src/router/routes/modules/demo/comp.ts
src/views/demo/comp/count-to/index.vue
src/views/demo/comp/verify/Rotate.vue
 {
   "name": "vben-admin-2.0",
-  "version": "2.0.0-beta.5",
+  "version": "2.0.0-beta.6",
   "scripts": {
     "bootstrap": "yarn install",
     "serve": "ts-node --project ./build/tsconfig.json  ./build/script/preserve && cross-env NODE_ENV=development vite",
@@ -41,8 +41,8 @@
     display: flex;
     width: 100%;
     height: 100%;
-    // background: rgba(255, 255, 255, 0.5);
-    background: #f1f1f63d;
+    // background: rgba(255, 255, 255, 0.3);
+    background: rgba(241, 241, 246, 0.8);
     justify-content: center;
     align-items: center;
   }
-import { createSimpleTransition, createJavascriptTransition } from './src/CreateTransition';
+import {
+  //  createSimpleTransition,
+  createJavascriptTransition,
+} from './src/CreateTransition';
 import ExpandTransitionGenerator from './src/ExpandTransition';
 export { default as CollapseTransition } from './src/CollapseTransition';
-export const FadeTransition = createSimpleTransition('fade-transition');
-export const ScaleTransition = createSimpleTransition('scale-transition');
-export const SlideYTransition = createSimpleTransition('slide-y-transition');
-export const ScrollYTransition = createSimpleTransition('scroll-y-transition');
-export const SlideYReverseTransition = createSimpleTransition('slide-y-reverse-transition');
-export const ScrollYReverseTransition = createSimpleTransition('scroll-y-reverse-transition');
-export const SlideXTransition = createSimpleTransition('slide-x-transition');
-export const ScrollXTransition = createSimpleTransition('scroll-x-transition');
-export const SlideXReverseTransition = createSimpleTransition('slide-x-reverse-transition');
-export const ScrollXReverseTransition = createSimpleTransition('scroll-x-reverse-transition');
-export const ScaleRotateTransition = createSimpleTransition('scale-rotate-transition');
+// export const FadeTransition = createSimpleTransition('fade-transition');
+// export const ScaleTransition = createSimpleTransition('scale-transition');
+// export const SlideYTransition = createSimpleTransition('slide-y-transition');
+// export const ScrollYTransition = createSimpleTransition('scroll-y-transition');
+// export const SlideYReverseTransition = createSimpleTransition('slide-y-reverse-transition');
+// export const ScrollYReverseTransition = createSimpleTransition('scroll-y-reverse-transition');
+// export const SlideXTransition = createSimpleTransition('slide-x-transition');
+// export const ScrollXTransition = createSimpleTransition('scroll-x-transition');
+// export const SlideXReverseTransition = createSimpleTransition('slide-x-reverse-transition');
+// export const ScrollXReverseTransition = createSimpleTransition('scroll-x-reverse-transition');
+// export const ScaleRotateTransition = createSimpleTransition('scale-rotate-transition');
 // Javascript transitions
 export const ExpandTransition = createJavascriptTransition(
@@ -22,7 +25,7 @@ export const ExpandTransition = createJavascriptTransition(
   ExpandTransitionGenerator()
 );
-export const ExpandXTransition = createJavascriptTransition(
-  'expand-x-transition',
-  ExpandTransitionGenerator('', true)
-);
+// export const ExpandXTransition = createJavascriptTransition(
+//   'expand-x-transition',
+//   ExpandTransitionGenerator('', true)
+// );
@@ -6,9 +6,6 @@ import { userStore } from &#39;/@/store/modules/user&#39;;
 export function createPageLoadingGuard(router: Router) {
   let isFirstLoad = true;
   router.beforeEach(async (to) => {
-    console.log('======================');
-    console.log(2);
-    console.log('======================');
     const {
       openKeepAlive,
       openRouterTransition,
@@ -9,6 +9,10 @@ const menu: MenuModule = {
         path: '/basic',
         name: '基础组件',
       },
+      {
+        path: '/countTo',
+        name: '数字动画',
+      },
       {
         path: '/scroll',
@@ -23,6 +23,14 @@ export default {
         title: '基础组件',
       },
     },
+    {
+      path: '/countTo',
+      name: 'CountTo',
+      component: () => import('/@/views/demo/comp/count-to/index.vue'),
+      meta: {
+        title: '数字动画',
+      },
+    },
     {
       path: '/scroll',
+<template>
+  <div class="p-4 count-to-demo">
+    <Card>
+      <CardGrid class="count-to-demo-card">
+        <CountTo prefix="$" :startVal="1" :endVal="200000" :duration="8000" />
+      </CardGrid>
+      <CardGrid class="count-to-demo-card">
+        <CountTo suffix="$" :startVal="1" :endVal="300000" :decimals="2" :duration="6000" />
+      </CardGrid>
+      <CardGrid class="count-to-demo-card">
+        <CountTo suffix="$" :startVal="1" :endVal="400000" :duration="7000" />
+      </CardGrid>
+      <CardGrid class="count-to-demo-card">
+        <CountTo separator="-" :startVal="10000" :endVal="500000" :duration="8000" />
+      </CardGrid>
+    </Card>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { Card } from 'ant-design-vue';
+  import { CountTo } from '/@/components/CountTo/index';
+  export default defineComponent({
+    components: {
+      Card,
+      CardGrid: Card.Grid,
+      CountTo,
+    },
+    setup() {
+      return {};
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .count-to-demo {
+    &-card {
+      width: 50%;
+      font-size: 30px;
+      text-align: center;
+    }
+  }
+</style>
 <template>
   <div class="p-10">
     <div class="flex justify-center p-4 items-center bg-gray-700">
-      <RotateDragVerify src="/@/assets/images/header.jpg" ref="el" @success="handleSuccess" />
+      <RotateDragVerify :src="img" ref="el" @success="handleSuccess" />
     </div>
   </div>
 </template>
@@ -9,6 +9,7 @@
   import { defineComponent } from 'vue';
   import { RotateDragVerify } from '/@/components/Verify/index';
+  import img from '/@/assets/images/header.jpg';
   export default defineComponent({
     components: { RotateDragVerify },
     setup() {
@@ -17,6 +18,7 @@
       };
       return {
         handleSuccess,
+        img,
       };
     },
   });