127 lines
3.1 KiB
Vue
127 lines
3.1 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<view>
|
||
|
|
<vueCountTo ref='example1' :start-val="startVal1" :end-val="endVal1" :duration="4000"></vueCountTo>
|
||
|
|
<view @click='start1'>start</view>
|
||
|
|
<view @click='changeExampleEndVal'>change end-val</view>
|
||
|
|
<view @click='incrementalUpdate'>incremental update</view>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<vueCountTo ref="example2" :start-val="2017" :end-val="0" :duration="8000"></vueCountTo>
|
||
|
|
<view @click="start2">start</view>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<vueCountTo ref="example3" :start-val="_startVal" :end-val="_endVal" :duration="_duration"
|
||
|
|
:decimals="_decimals" :separator="_separator" :prefix="_prefix" :suffix="_suffix" :autoplay="false">
|
||
|
|
</vueCountTo>
|
||
|
|
<view>
|
||
|
|
<label for="startValInput">startVal: <input type="number" v-model.number='setStartVal'
|
||
|
|
name='startValInput' /></label>
|
||
|
|
<label for="endValInput">endVal: <input type="number" v-model.number='setEndVal'
|
||
|
|
name='endVaInput' /></label>
|
||
|
|
<label for="durationInput">duration: <input type="number" v-model.number='setDuration'
|
||
|
|
name='durationInput' /></label>
|
||
|
|
<view @click='start3'>start</view>
|
||
|
|
<view @click='pauseResume'>pause/resume</view>
|
||
|
|
<label for="decimalsInput">decimals: <input type="number" v-model.number='setDecimals' name='decimalsInput' /></label>
|
||
|
|
<label for="separatorInput">separator: <input v-model='setSeparator' name='separatorInput' /></label>
|
||
|
|
<label for="prefixInput">prefix: <input v-model='setPrefix' name='prefixInput' /></label>
|
||
|
|
<label for="suffixInput">suffix: <input v-model='setSuffix' name='suffixInput' /></label>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import vueCountTo from '@/components/count-animate/count-one/vue-countTo.vue';
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
vueCountTo
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
setStartVal: 0,
|
||
|
|
setEndVal: 2017,
|
||
|
|
setDuration: 4000,
|
||
|
|
setDecimals: 0,
|
||
|
|
setSeparator: ',',
|
||
|
|
setSuffix: ' rmb',
|
||
|
|
setPrefix: '¥ ',
|
||
|
|
startVal1: 0,
|
||
|
|
endVal1: 2017
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
_startVal() {
|
||
|
|
if (this.setStartVal) {
|
||
|
|
return this.setStartVal
|
||
|
|
} else {
|
||
|
|
return 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
_endVal() {
|
||
|
|
if (this.setEndVal) {
|
||
|
|
return this.setEndVal
|
||
|
|
} else {
|
||
|
|
return 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
_duration() {
|
||
|
|
if (this.setDuration) {
|
||
|
|
return this.setDuration
|
||
|
|
} else {
|
||
|
|
return 100
|
||
|
|
}
|
||
|
|
},
|
||
|
|
_decimals() {
|
||
|
|
if (this.setDecimals) {
|
||
|
|
if (this.setDecimals < 0 || this.setDecimals > 20) {
|
||
|
|
alert('digits argument must be between 0 and 20')
|
||
|
|
return 0
|
||
|
|
}
|
||
|
|
return this.setDecimals
|
||
|
|
} else {
|
||
|
|
return 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
_separator() {
|
||
|
|
return this.setSeparator
|
||
|
|
},
|
||
|
|
_suffix() {
|
||
|
|
return this.setSuffix
|
||
|
|
},
|
||
|
|
_prefix() {
|
||
|
|
return this.setPrefix
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
changeExampleEndVal() {
|
||
|
|
this.endVal1 = this.endVal1 + 1000
|
||
|
|
},
|
||
|
|
incrementalUpdate() {
|
||
|
|
this.startVal1 = this.endVal1
|
||
|
|
this.endVal1 = this.endVal1 + 1000
|
||
|
|
},
|
||
|
|
callback() {
|
||
|
|
console.log('callback')
|
||
|
|
},
|
||
|
|
start1() {
|
||
|
|
this.$refs.example1.start();
|
||
|
|
},
|
||
|
|
start2() {
|
||
|
|
this.$refs.example2.start();
|
||
|
|
},
|
||
|
|
start3() {
|
||
|
|
this.$refs.example3.start();
|
||
|
|
},
|
||
|
|
pauseResume() {
|
||
|
|
this.$refs.example3.pauseResume();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
|
||
|
|
</style>
|