112 lines
2.9 KiB
Vue
112 lines
2.9 KiB
Vue
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<el-alert
|
|||
|
|
effect="dark"
|
|||
|
|
:closable="false"
|
|||
|
|
title="基于 vue-count-to 进行改造，支持所有 vue-count-to 参数。"
|
|||
|
|
type="info"
|
|||
|
|
style="margin-bottom: 20px"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<div class="count-to">
|
|||
|
|
<count-to
|
|||
|
|
ref="countRef"
|
|||
|
|
:start-val="startVal"
|
|||
|
|
:end-val="endVal"
|
|||
|
|
:duration="duration"
|
|||
|
|
:decimals="decimals"
|
|||
|
|
:separator="separator"
|
|||
|
|
:prefix="prefix"
|
|||
|
|
:suffix="suffix"
|
|||
|
|
:autoplay="autoplay"
|
|||
|
|
class="count-to__item"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="action">
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="8">
|
|||
|
|
<div class="action__item">
|
|||
|
|
<span>startVal：</span><el-input-number v-model="startVal" :min="0" />
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="8">
|
|||
|
|
<div class="action__item">
|
|||
|
|
<span>endVal：</span><el-input-number v-model="endVal" :min="1" />
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="8">
|
|||
|
|
<div class="action__item">
|
|||
|
|
<span>duration：</span><el-input-number v-model="duration" :min="1000" />
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="8">
|
|||
|
|
<div class="action__item"> <span>separator：</span><el-input v-model="separator" /> </div>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="8">
|
|||
|
|
<div class="action__item"> <span>prefix：</span><el-input v-model="prefix" /> </div>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="8">
|
|||
|
|
<div class="action__item"> <span>suffix：</span><el-input v-model="suffix" /> </div>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="24">
|
|||
|
|
<div style="text-align: center; margin-top: 20px">
|
|||
|
|
<el-button type="primary" @click="start">start</el-button>
|
|||
|
|
<el-button style="margin-left: 10px" @click="pauseResume">pause/resume</el-button>
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts" name="CountToDemo">
|
|||
|
|
import { ref, unref } from 'vue'
|
|||
|
|
import CountTo from '_c/CountTo/index.vue'
|
|||
|
|
const countRef = ref<HTMLElement | null>(null)
|
|||
|
|
const startVal = ref<number>(0)
|
|||
|
|
const endVal = ref<number>(1314512)
|
|||
|
|
const duration = ref<number>(3000)
|
|||
|
|
const decimals = ref<number>(0)
|
|||
|
|
const separator = ref<string>(',')
|
|||
|
|
const prefix = ref<string>('¥ ')
|
|||
|
|
const suffix = ref<string>(' rmb')
|
|||
|
|
const autoplay = ref<boolean>(false)
|
|||
|
|
|
|||
|
|
function start(): void {
|
|||
|
|
;(unref(countRef) as any).start()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function pauseResume(): void {
|
|||
|
|
;(unref(countRef) as any).pauseResume()
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="less" scoped>
|
|||
|
|
.count-to {
|
|||
|
|
text-align: center;
|
|||
|
|
margin-top: 40px;
|
|||
|
|
&__item {
|
|||
|
|
font-size: 80px;
|
|||
|
|
color: #f6416c;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.action {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
&__item {
|
|||
|
|
padding: 0 15px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
& > span {
|
|||
|
|
display: inline-block;
|
|||
|
|
width: 120px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
:deep(.el-input-number) {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|