133 lines
3.3 KiB
Python
133 lines
3.3 KiB
Python
<template>
|
||
<view class="u-demo">
|
||
<view class="u-demo-wrap">
|
||
<view class="u-demo-title">演示效果</view>
|
||
<view class="u-demo-area">
|
||
<u-toast ref="uToast"></u-toast>
|
||
<view class="u-no-demo-here">如果使用text-align: center对齐，数字滚动期间可能会抖动，见文档说明</view>
|
||
<view class="count-to-demo">
|
||
<u-count-to
|
||
class="count-to"
|
||
:useEasing="useEasing"
|
||
ref="uCountTo"
|
||
:autoplay="autoplay"
|
||
:startVal="startVal"
|
||
:endVal="endVal"
|
||
:duration="duration"
|
||
:decimals="decimals"
|
||
:bold="bold"
|
||
@end="end"
|
||
></u-count-to>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="u-config-wrap">
|
||
<view class="u-config-title u-border-bottom">参数配置</view>
|
||
<view class="u-config-item">
|
||
<view class="u-item-title">状态</view>
|
||
<u-subsection vibrateShort :current="current" :list="['启动', '暂停', '继续', '重置']" @change="statusChange"></u-subsection>
|
||
</view>
|
||
<view class="u-config-item">
|
||
<view class="u-item-title">目标值</view>
|
||
<u-subsection vibrateShort :list="[608, 5604, 45617]" @change="endValChange"></u-subsection>
|
||
</view>
|
||
<view class="u-config-item">
|
||
<view class="u-item-title">滚动时间</view>
|
||
<u-subsection vibrateShort current="1" :list="[1000, 2000, 3000]" @change="durationChange"></u-subsection>
|
||
</view>
|
||
<view class="u-config-item">
|
||
<view class="u-item-title">显示小数</view>
|
||
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="decimalsChange"></u-subsection>
|
||
</view>
|
||
<view class="u-config-item">
|
||
<view class="u-item-title">字体加粗</view>
|
||
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="boldChange"></u-subsection>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
startVal: 0,
|
||
endVal: 608,
|
||
separator: ',',
|
||
decimals: 0,
|
||
duration: 2000,
|
||
autoplay: false,
|
||
useEasing: true,
|
||
current: 3,
|
||
isStop: false, // 如果开没启动前，不允许点击状态选项的"继续"按钮，否则会导致显示NaN
|
||
bold: false
|
||
};
|
||
},
|
||
methods: {
|
||
endValChange(index) {
|
||
this.endVal = index == 0 ? 608 : index == 1 ? 5604 : 45617;
|
||
this.reset();
|
||
this.start();
|
||
},
|
||
durationChange(index) {
|
||
this.duration = index == 0 ? 1000 : index == 1 ? 2000 : 3000;
|
||
},
|
||
boldChange(index) {
|
||
this.bold = !!!index;
|
||
},
|
||
decimalsChange(index) {
|
||
this.decimals = index == 0 ? 2 : 0;
|
||
},
|
||
statusChange(index) {
|
||
this.current = index;
|
||
if (index == 0) {
|
||
this.start();
|
||
} else if (index == 1) {
|
||
this.stop();
|
||
} else if (index == 2) {
|
||
this.resume();
|
||
} else {
|
||
this.reset();
|
||
}
|
||
},
|
||
end() {
|
||
this.current = 3;
|
||
this.$refs.uToast.show({
|
||
type: 'warning',
|
||
title: '滚动结束'
|
||
});
|
||
},
|
||
start() {
|
||
this.current = 0;
|
||
this.isStop = true;
|
||
this.$refs.uCountTo.start();
|
||
},
|
||
stop() {
|
||
this.$refs.uCountTo.stop();
|
||
},
|
||
resume() {
|
||
if (!this.isStop) {
|
||
this.$refs.uToast.show({
|
||
type: 'error',
|
||
title: '请开始并暂停后才能继续'
|
||
});
|
||
this.$nextTick(() => {
|
||
this.current = 3;
|
||
});
|
||
return;
|
||
}
|
||
this.$refs.uCountTo.resume();
|
||
},
|
||
reset() {
|
||
this.$refs.uCountTo.reset();
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.count-to-demo {
|
||
text-align: center;
|
||
}
|
||
</style>
|