canrd-outside / order-erp-front · Commits

Commit afc7263efb90c0410041358a9dd5f10ec685ac2f

Authored by vben
1 parent 4811cce8

feat: add count-to component and demo

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