From afc7263efb90c0410041358a9dd5f10ec685ac2f Mon Sep 17 00:00:00 2001 From: vben Date: Mon, 12 Oct 2020 01:15:31 +0800 Subject: [PATCH] feat: add count-to component and demo --- package.json | 2 +- src/components/Loading/FullLoading.vue | 4 +-- src/components/Transition/index.ts | 35 +++++++++++---------- src/router/guard/pageLoadingGuard.ts | 3 -- src/router/menus/modules/demo/comp.ts | 4 +++ src/router/routes/modules/demo/comp.ts | 8 +++++ src/views/demo/comp/count-to/index.vue | 42 ++++++++++++++++++++++++++ src/views/demo/comp/verify/Rotate.vue | 4 ++- 8 files changed, 79 insertions(+), 23 deletions(-) create mode 100644 src/views/demo/comp/count-to/index.vue diff --git a/package.json b/package.json index 01e20535..8713543c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "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", diff --git a/src/components/Loading/FullLoading.vue b/src/components/Loading/FullLoading.vue index a3d8ca3d..8be147f9 100644 --- a/src/components/Loading/FullLoading.vue +++ b/src/components/Loading/FullLoading.vue @@ -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; } diff --git a/src/components/Transition/index.ts b/src/components/Transition/index.ts index c7f489a0..2fe5683d 100644 --- a/src/components/Transition/index.ts +++ b/src/components/Transition/index.ts @@ -1,20 +1,23 @@ -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) +// ); diff --git a/src/router/guard/pageLoadingGuard.ts b/src/router/guard/pageLoadingGuard.ts index 36fb04f5..a038d40e 100644 --- a/src/router/guard/pageLoadingGuard.ts +++ b/src/router/guard/pageLoadingGuard.ts @@ -6,9 +6,6 @@ import { userStore } from '/@/store/modules/user'; export function createPageLoadingGuard(router: Router) { let isFirstLoad = true; router.beforeEach(async (to) => { - console.log('======================'); - console.log(2); - console.log('======================'); const { openKeepAlive, openRouterTransition, diff --git a/src/router/menus/modules/demo/comp.ts b/src/router/menus/modules/demo/comp.ts index dcadc785..c60b1055 100644 --- a/src/router/menus/modules/demo/comp.ts +++ b/src/router/menus/modules/demo/comp.ts @@ -9,6 +9,10 @@ const menu: MenuModule = { path: '/basic', name: '基础组件', }, + { + path: '/countTo', + name: '数字动画', + }, { path: '/scroll', diff --git a/src/router/routes/modules/demo/comp.ts b/src/router/routes/modules/demo/comp.ts index 65087790..dc7c687e 100644 --- a/src/router/routes/modules/demo/comp.ts +++ b/src/router/routes/modules/demo/comp.ts @@ -23,6 +23,14 @@ export default { title: '基础组件', }, }, + { + path: '/countTo', + name: 'CountTo', + component: () => import('/@/views/demo/comp/count-to/index.vue'), + meta: { + title: '数字动画', + }, + }, { path: '/scroll', diff --git a/src/views/demo/comp/count-to/index.vue b/src/views/demo/comp/count-to/index.vue new file mode 100644 index 00000000..dc2725dc --- /dev/null +++ b/src/views/demo/comp/count-to/index.vue @@ -0,0 +1,42 @@ + + + diff --git a/src/views/demo/comp/verify/Rotate.vue b/src/views/demo/comp/verify/Rotate.vue index c7b72250..65d799fb 100644 --- a/src/views/demo/comp/verify/Rotate.vue +++ b/src/views/demo/comp/verify/Rotate.vue @@ -1,7 +1,7 @@ @@ -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, }; }, });