cloud-ui.vusion
Version:
Vusion Cloud UI
205 lines (166 loc) • 4.81 kB
Markdown
# 数字渐变 CountUp
## 示例
### 基本形式
``` html
<u-countup :end="100"></u-countup>
```
#### 分组 (1,000 vs 1000)
``` html
<u-countup :end="1000" is-group></u-countup>
```
#### 前缀,后缀
``` html
<u-countup :end="100" prefix="$" suffix="美元"></u-countup>
```
#### 小数
``` html
<u-countup :end="100" :decimals="2"></u-countup>
```
#### 动画函数
``` html
<u-countup :end="100" is-easing></u-countup>
```
#### 渐变时间(时间单位是秒)
``` html
<u-countup :end="100" :duration="3"></u-countup>
```
#### 转换单位简化数据
``` html
<u-countup :end="4567890" simplify></u-countup>
```
### 方法
```vue
<template>
<u-form>
<u-form-item label="演示效果">
<u-linear-layout>
<u-countup ref="countup" :start="start" :end="end" :auto-start="autoStart" :is-easing="isEasing" :duration="duration"></u-countup>
<u-button style="vertical-align: bottom;" color="primary" @click="show">开启渐变</u-button>
<u-button style="vertical-align: bottom;" @click="reset">重置</u-button>
<u-button style="vertical-align: bottom;" @click="pause">{{ `${isPause?'恢复':'暂停'}` }}</u-button>
</u-linear-layout>
</u-form-item>
<u-form-item label="结束值">
<u-input v-model.number="end"></u-input>
</u-form-item>
<!-- 不支持动态改变属性 -->
<!-- <u-form-item label="渐变时间">
<u-input v-model.number="duration"></u-input>
</u-form-item>
<u-form-item label="启用动画函数">
<u-capsules :value.sync="isEasing">
<u-capsule :value="false">false</u-capsule>
<u-capsule :value="true">true</u-capsule>
</u-capsules>
</u-form-item> -->
</u-form>
</template>
<script>
export default{
data() {
return {
start: 0,
end: 100,
duration: 2,
isEasing: true,
isPause: false,
// autoStart: false,
};
},
methods: {
show() {
// if (this.autoStart)
this.$refs.countup.update(this.end)
// else
// this.autoStart = true;
},
reset() {
this.$refs.countup.reset();
},
pause() {
this.isPause = !this.isPause;
this.$refs.countup.pauseResume();
}
},
};
</script>
```
### 渐变结束回调函数
```vue
<template>
<u-linear-layout>
<u-countup :end="100" :auto-start="autoStart" :end-callback="end"></u-countup>
<u-button style="vertical-align: bottom;" color="primary" @click="start">autoStart</u-button>
</u-linear-layout>
</template>
<script>
export default{
data() {
return {
autoStart: false,
};
},
methods: {
start() {
this.autoStart = true;
},
end() {
console.log('渐变结束');
},
},
};
</script>
```
## CountUp API
### Props/Attrs
| Prop/Attr | Type | Default | Description |
| --------- | ---- | ------- | ----------- |
| start | Number | `0` | 渐变开始数值 |
| end | Number | | 渐变结束数值 |
| duration | Number | `2` | 渐变时间间隔,时间单位为秒 |
| isEasing | Boolean | `false` | 是否使用 动画函数`easingFn`处理数据 |
| isGroup | Boolean | `false` | 是否分组,默认分组分隔符`'separator'`属性值为`','` |
| separator | String | `','` | 分组分隔符 |
| decimals | Number | `0` | 小数点后几位 |
| easingFn | Function | `'easeOutExpo'` | 自定义渐变动画,默认使用 `Robert Penner's easeOutExpo`函数 |
| simplify | Boolean | `false` | 是否使用自定义单位简化数据 |
| unit | Array | `[[3, 'K+'], [6, 'M+'], [9, 'G+']]` | 配合`'simplify'`属性使用的自定义单位 |
| prefix | String | `''` | 前缀内容 |
| suffix | String | `''` | 后缀内容 |
| endCallback | Function | `` | 渐变结束后的回调函数 |
| autoStart | Boolean | `false` | 是否开启渐变 |
### Slots
#### (default)
插入文本或`HTML`。
### Events
#### @update
更新渐变结束
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | Number | 最新结束值 |
#### @reset
重置
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | Number | 初始值 |
#### @pauseResume
切换渐变
| Param | Type | Description |
| ----- | ---- | ----------- |
| - | - | - |
### Methods
#### update(value)
更新渐变结束值
| Param | Type | Description |
| ----- | ---- | ----------- |
| value | Number | 最新结束值 |
#### reset()
重置
| Param | Type | Description |
| ----- | ---- | ----------- |
| - | -| - |
#### pauseResume()
切换渐变
| Param | Type | Description |
| ----- | ---- | ----------- |
| - | - | - |