github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-01-24 02:00:25 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

feat: add count-to component and demo

Browse Source
This commit is contained in:
vben 2020-10-12 01:15:31 +08:00
parent 4811cce809
commit afc7263efb
8 changed files with 79 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -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",

4
src/components/Loading/FullLoading.vue
View File

@ -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;
}

35
src/components/Transition/index.ts
View File

@ -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)
// );

3
src/router/guard/pageLoadingGuard.ts
View File

@ -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,

4
src/router/menus/modules/demo/comp.ts
View File

@ -9,6 +9,10 @@ const menu: MenuModule = {
path: '/basic',
name: '基础组件',
},
{
path: '/countTo',
name: '数字动画',
},
{
path: '/scroll',

8
src/router/routes/modules/demo/comp.ts
View File

@ -23,6 +23,14 @@ export default {
title: '基础组件',
},
},
{
path: '/countTo',
name: 'CountTo',
component: () => import('/@/views/demo/comp/count-to/index.vue'),
meta: {
title: '数字动画',
},
},
{
path: '/scroll',

42
src/views/demo/comp/count-to/index.vue Normal file
View File

@ -0,0 +1,42 @@
<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>

4
src/views/demo/comp/verify/Rotate.vue
View File

@ -1,7 +1,7 @@
<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,
};
},
});