<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>