组件库文档 tmui.design
数值显示 Statistic
主要用来显示数值,翻转动画。
🌶️ 数值显示 Statistic 示例
查看模拟效果+
示例代码
vue
<template>
<tm-app>
<tm-sheet>
<tm-text :font-size="24" _class="text-weight-b" label="基础示例,更多见文档"></tm-text>
<tm-divider></tm-divider>
<tm-statistic :endVal="2022" :fontSize="62" suffix="年" color="primary"></tm-statistic>
</tm-sheet>
<tm-sheet>
<tm-text :font-size="24" _class="text-weight-b" label="基础示例,更多见文档"></tm-text>
<tm-divider></tm-divider>
<view class="flex flex-row flex-between">
<view class="px-12">
<tm-statistic prefix="↑" :startVal="0" :decimals="2" :endVal="86.32" :fontSize="32" suffix="%" color="green"></tm-statistic>
</view>
<view class="px-12">
<tm-statistic prefix="↓" :startVal="0" :decimals="2" :endVal="1050.98" :fontSize="32" suffix="元" color="red"></tm-statistic>
</view>
<view class="px-12">
<tm-statistic :fontSize="32" suffix="元" color="orange"></tm-statistic>
</view>
</view>
</tm-sheet>
</tm-app>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import tmApp from '@/tmui/components/tm-app/tm-app.vue'
import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
import tmText from '@/tmui/components/tm-text/tm-text.vue'
import tmStatistic from '@/tmui/components/tm-statistic/tm-statistic.vue'
import tmDivider from '@/tmui/components/tm-divider/tm-divider.vue'
</script>
🌶️ 兼容性
APP-VUE | APP-NVUE | 小程序 | WEB/H5 | VUE3/TS |
---|---|---|---|---|
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
🌱 参数
本组件含有公共属性 公共属性
参数名 | 类型 | 默认值 | 描述 |
---|---|---|---|
followTheme | [Boolean,String] | true | 是否跟随全局主题的变换而变换 |
fontSize | Number | 30 | 字体大小 |
color | String | "" | 字体颜色 |
startVal | Number,required:false | 0 | 起始值 |
endVal | Number,required:false | 2021 | 最终值 |
duration | Number,required:false | 3000 | 从起始值到结束值数字变动的时间 |
autoplay | Boolean,required:false | true | 是否自动播放 |
decimals | Number,required:false | 0,validator(value) | 保留的小数位数 |
decimal | String,required:false | '.' | 小数点分割符号 |
separator | String,required:false | ',' | 上了三位数分割的符号 |
prefix | String,required:false | '' | 前缀 |
suffix | String,required:false | '' | 后缀 |
useEasing | Boolean,required:false | true | 是否具有连贯性 |
isFrequent | Boolean,required:false | false | 是否隔一段时间数字跳动,这里的跳动是隔一段时间设置初始值 |
frequentTime | Number,required:false | 5000 | 跳动间隔时间 |
🌹 事件
事件名 | 参数 | 返回数据 | 描述 |
---|---|---|---|
mountedCallback | - | - | 组件挂载成功事件 |
callback |
🌽 slot插槽
插槽名称 | 插槽参数 | 插槽数据 | 说明 |
---|---|---|---|
prefix | - | - | 前缀插槽 |
default | - | - | 默认插槽 |
suffix | - | - | 后缀插槽 |
🥗 ref方法
方法名称 | 参数 | 返回数据 | 描述 |
---|---|---|---|
start | startVal:number | - | 开始数值动画 |
reset | - | - | 重置数值动画 |
pause | - | - | 暂停数值动画 |
💏 文档贡献
此页文档由夏天贡献,如果对该框架感兴趣的可以参与我们一同进步!