feat: add count-to component and demo

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

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>

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