twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-11-03 13:44:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add countTo example

Browse Source
This commit is contained in:
xiaoxian521 2021-04-11 15:45:54 +08:00
parent 90b2ac8599
commit 65aac55053
7 changed files with 101 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/countTo/src/index.vue
View File

@ -1,5 +1,5 @@
<template>
<span>{{ displayValue }}</span>
<span :style="{color: color}">{{ displayValue }}</span>
</template>
<script lang="ts">
import {
@ -28,6 +28,7 @@ export default defineComponent({
timestamp: number | null;
rAF: any;
remaining: number | null;
color: any;
}>({
localStartVal: props.startVal,
displayValue: formatNumber(props.startVal),
@ -37,7 +38,8 @@ export default defineComponent({
startTime: null,
timestamp: null,
remaining: null,
rAF: null
rAF: null,
color: null
});
onMounted(() => {
@ -58,11 +60,12 @@ export default defineComponent({
});
function start() {
const { startVal, duration } = props;
const { startVal, duration, color } = props;
state.localStartVal = startVal;
state.startTime = null;
state.localDuration = duration;
state.paused = false;
state.color = color;
state.rAF = requestAnimationFrame(count);
}

5
src/components/countTo/src/props.ts
View File

@ -1,3 +1,4 @@
import { strict } from 'assert'
import { PropType } from 'vue'
import { propTypes } from '/@/utils/propTypes'
export const countToProps = {
@ -13,6 +14,10 @@ export const countToProps = {
return value >= 0
},
},
color: {
type: String as PropType<string>,
require: false
},
decimal: propTypes.string.def('.'),
separator: propTypes.string.def(','),
prefix: propTypes.string.def(''),

3
src/locales/ch.json
View File

@ -15,5 +15,6 @@
"draggable": "拖拽组件",
"split-pane": "切割面板",
"button": "按钮组件",
"cropping": "图片裁剪"
"cropping": "图片裁剪",
"countTo": "数字动画"
}

3
src/locales/en.json
View File

@ -15,5 +15,6 @@
"draggable": "Draggable Components",
"split-pane": "Split Pane",
"button": "Button Components",
"cropping": "Picture Cropping"
"cropping": "Picture Cropping",
"countTo": "Digital Animation"
}

9
src/router/index.ts
View File

@ -85,6 +85,15 @@ const routes: Array<RouteRecordRaw> = [
showLink: false,
savedPosition: true
}
},
{
path: '/components/countTo',
component: () => import(/* webpackChunkName: "components" */ '../views/components/countTo/index.vue'),
meta: {
title: 'countTo',
showLink: false,
savedPosition: true
}
}
],
meta: {

34
src/views/components/countTo/index.vue Normal file
View File

@ -0,0 +1,34 @@
<template>
<div style="margin:10px">
<el-row :gutter="10">
<el-col :span="10">
<el-card shadow="always">
<CountTo prefix="$" :color="'#409EFF'" :startVal="1" :endVal="1000" />
</el-card>
</el-col>
<el-col :span="10">
<el-card shadow="always">
<CountTo prefix="$" :color="'green'" :startVal="1" :endVal="1500" />
</el-card>
</el-col>
</el-row>
</div>
</template>
<script lang='ts'>
import CountTo from "../../../components/countTo/src/index.vue";
export default {
components: {
CountTo
},
setup() {
return {};
}
};
</script>
<style lang="scss" scoped>
:deep(.el-card) {
text-align: center;
}
</style>

81
src/views/welcome.vue
View File

@ -23,13 +23,11 @@
</template>
</el-skeleton>
</el-card>
<!-- <CountTo prefix="$" :startVal="1" :endVal="200" /> -->
</div>
</template>
<script lang='ts'>
import flop from "../components/flop/index.vue";
import CountTo from "../components/countTo/src/index.vue";
import { ref, computed, onMounted, inject, nextTick } from "vue";
import { deviceDetection } from "../utils/deviceDetection";
import { echartsJson } from "../api/mock";
@ -39,8 +37,7 @@ let brokenLine: any = null; //折线图实例
export default {
name: "welcome",
components: {
flop,
CountTo,
flop
},
setup() {
let mobile = ref(deviceDetection());
@ -50,9 +47,9 @@ export default {
setTimeout(() => {
loading.value = !loading.value;
nextTick(()=>{
nextTick(() => {
initbrokenLine();
})
});
}, 2000);
let greetings = computed(() => {
@ -74,39 +71,39 @@ export default {
brokenLine.setOption({
title: {
text: "上海 空气质量指数",
left: "1%",
left: "1%"
},
tooltip: {
trigger: "axis",
trigger: "axis"
},
grid: {
left: "5%",
right: "15%",
bottom: "10%",
bottom: "10%"
},
xAxis: {
data: info.map(function (item) {
data: info.map(function(item) {
return item[0];
}),
})
},
yAxis: {},
toolbox: {
right: 10,
feature: {
dataZoom: {
yAxisIndex: "none",
yAxisIndex: "none"
},
restore: {},
saveAsImage: {},
},
saveAsImage: {}
}
},
dataZoom: [
{
startValue: "2014-06-01",
startValue: "2014-06-01"
},
{
type: "inside",
},
type: "inside"
}
],
visualMap: {
top: 50,
@ -115,78 +112,78 @@ export default {
{
gt: 0,
lte: 50,
color: "#93CE07",
color: "#93CE07"
},
{
gt: 50,
lte: 100,
color: "#FBDB0F",
color: "#FBDB0F"
},
{
gt: 100,
lte: 150,
color: "#FC7D02",
color: "#FC7D02"
},
{
gt: 150,
lte: 200,
color: "#FD0100",
color: "#FD0100"
},
{
gt: 200,
lte: 300,
color: "#AA069F",
color: "#AA069F"
},
{
gt: 300,
color: "#AC3B2A",
},
color: "#AC3B2A"
}
],
outOfRange: {
color: "#999",
},
color: "#999"
}
},
series: {
name: "上海 空气质量指数",
type: "line",
data: info.map(function (item) {
data: info.map(function(item) {
return item[1];
}),
markLine: {
silent: true,
lineStyle: {
color: "#333",
color: "#333"
},
data: [
{
yAxis: 50,
yAxis: 50
},
{
yAxis: 100,
yAxis: 100
},
{
yAxis: 150,
yAxis: 150
},
{
yAxis: 200,
yAxis: 200
},
{
yAxis: 300,
},
],
},
},
yAxis: 300
}
]
}
}
});
});
};
const openDepot = ():void => {
window.open('https://github.com/xiaoxian521/vue-pure-admin')
}
const openDepot = (): void => {
window.open("https://github.com/xiaoxian521/vue-pure-admin");
};
onMounted(() => {
useEventListener("resize", () => {
if(!brokenLine) return;
if (!brokenLine) return;
brokenLine.resize();
});
});
@ -197,7 +194,7 @@ export default {
loading,
openDepot
};
},
}
};
</script>