79 lines
2.1 KiB
Vue
79 lines
2.1 KiB
Vue
<template>
|
||
<ciy-header ref="header" title="ciy-shownum组件"></ciy-header>
|
||
<view>
|
||
<view class="ciy-card">
|
||
<view class="title">数字动效显示</view>
|
||
<view class="content">
|
||
<view class="tip">
|
||
带累进单位的数字跳动动画。<br />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="txt-lgggg txt-center">
|
||
<ciy-shownum :value="props.value" :unit="props.unit" :speed="props.speed"></ciy-shownum>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">属性</view>
|
||
<view class="content">
|
||
<view class="prp">value</view>
|
||
<view class="tip">显示的原始数字。</view>
|
||
<ciy-input bb v-model="props.value" style="width:8em;text-align: right;"></ciy-input>
|
||
<view class="hr"></view>
|
||
<view class="prp">unit</view>
|
||
<view class="tip">
|
||
单位、换算关系及保留小数位数。<br />
|
||
多个递进单位用|分隔<br/>
|
||
单位定义: 单位名称,倍数,保留小数位数<br/>
|
||
保留小数位数支持:<br/>
|
||
负值: 小数点保留n位，全0则不显示。<br/>
|
||
正值: 小数点保留n位，不去0。<br/>
|
||
零值: 按数长保留，尽量少的位数显示。<br/>
|
||
</view>
|
||
<ciy-input bb v-model="props.unit"></ciy-input>
|
||
<view class="hr"></view>
|
||
<view class="prp">speed</view>
|
||
<view class="tip">
|
||
数字变化持续跳动帧数，每帧16ms。<br />
|
||
默认 30
|
||
</view>
|
||
<ciy-input bb v-model="props.speed" style="width:4em;"></ciy-input>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">方法</view>
|
||
<view class="content">
|
||
无
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">事件</view>
|
||
<view class="content">
|
||
无
|
||
</view>
|
||
</view>
|
||
<view class="hr"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped>
|
||
@import '@/pages/demo/zdemo.css';
|
||
</style>
|
||
|
||
<script>
|
||
import zmixin from '@/pages/demo/zmixin.js';
|
||
export default {
|
||
mixins: [zmixin],
|
||
data() {
|
||
return {
|
||
props: {
|
||
value: 12300,
|
||
unit: '元,100,-2|万元,1000000,3|亿元,10000000000,3',
|
||
speed: '30'
|
||
}
|
||
}
|
||
},
|
||
onLoad() {},
|
||
methods: {
|
||
}
|
||
}
|
||
</script> |