mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-07 08:57:19 +08:00
feat: add countTo example
This commit is contained in:
xiaoxian521
parent
90b2ac8599
commit
65aac55053
@ -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);
|
||||
}
|
||||
|
||||
|
||||
@ -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(''),
|
||||
|
||||
@ -15,5 +15,6 @@
|
||||
"draggable": "拖拽组件",
|
||||
"split-pane": "切割面板",
|
||||
"button": "按钮组件",
|
||||
"cropping": "图片裁剪"
|
||||
"cropping": "图片裁剪",
|
||||
"countTo": "数字动画"
|
||||
}
|
||||
@ -15,5 +15,6 @@
|
||||
"draggable": "Draggable Components",
|
||||
"split-pane": "Split Pane",
|
||||
"button": "Button Components",
|
||||
"cropping": "Picture Cropping"
|
||||
"cropping": "Picture Cropping",
|
||||
"countTo": "Digital Animation"
|
||||
}
|
||||
@ -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
34
src/views/components/countTo/index.vue
Normal 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>
|
||||
@ -17,19 +17,17 @@
|
||||
|
||||
<!-- 图表 -->
|
||||
<el-card class="box-card">
|
||||
<el-skeleton style="height: 50vh" :rows="8" :loading="loading" animated>
|
||||
<template #default>
|
||||
<el-skeleton style="height: 50vh" :rows="8" :loading="loading" animated>
|
||||
<template #default>
|
||||
<div id="brokenLine"></div>
|
||||
</template>
|
||||
</el-skeleton>
|
||||
</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>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user