123 lines
4.5 KiB
Markdown
123 lines
4.5 KiB
Markdown
|
::: title 基础使用
|
|||
|
|
:::
|
|||
|
|
|
|||
|
|
::: demo
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<h1 style="padding:20px 15px">
|
|||
|
|
<lay-count-up :end-val="countVal" :decimalPlaces="2"></lay-count-up>
|
|||
|
|
</h1>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { ref } from 'vue'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
setup() {
|
|||
|
|
const countVal = 2862.9888;
|
|||
|
|
return {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
:::
|
|||
|
|
|
|||
|
|
::: title 自定义前缀&后缀
|
|||
|
|
:::
|
|||
|
|
|
|||
|
|
::: demo
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<!-- 属性 -->
|
|||
|
|
<lay-card style="width:200px;height:120px;display:inline-block; border:1px solid #eeeeee;box-shadow: 3px 3px 5px #888888">
|
|||
|
|
<h1 style="padding:20px 15px">
|
|||
|
|
<lay-count-up :end-val="countVal2" prefix="¥" suffix="↑"></lay-count-up>
|
|||
|
|
</h1>
|
|||
|
|
</lay-card>
|
|||
|
|
<!-- 插槽 -->
|
|||
|
|
<lay-card style="width:200px;height:120px;display:inline-block; margin-left:50px; border:1px solid #eeeeee;box-shadow: 3px 3px 5px #888888">
|
|||
|
|
<h1 style="padding:20px 15px">
|
|||
|
|
<lay-count-up :end-val="18" :duration="1">
|
|||
|
|
<template #prefix>
|
|||
|
|
<span style="font-size:75%">雷雨 </span>
|
|||
|
|
</template>
|
|||
|
|
<template #suffix>
|
|||
|
|
<span style="font-size:75%">
|
|||
|
|
<sub>℃</sub> ⛈
|
|||
|
|
</span>
|
|||
|
|
</template>
|
|||
|
|
</lay-count-up>
|
|||
|
|
</h1>
|
|||
|
|
</lay-card>
|
|||
|
|
<lay-button @click="handlerClick" type="primary" border="blue" size="sm" style="margin:0px 30px;">更新</lay-button>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { ref } from 'vue'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
setup() {
|
|||
|
|
const countVal2 = ref(98626);
|
|||
|
|
const handlerClick = () => {
|
|||
|
|
countVal2.value += 1000;
|
|||
|
|
}
|
|||
|
|
return {
|
|||
|
|
handlerClick,
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
:::
|
|||
|
|
|
|||
|
|
::: title countUp 属性
|
|||
|
|
:::
|
|||
|
|
|
|||
|
|
::: table
|
|||
|
|
|
|||
|
|
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|
|||
|
|
| ------------- | ------------------------------------------------------------ | -------------- | ------ | -------------- |
|
|||
|
|
| endVal | 显示的值 | number | `0` | — |
|
|||
|
|
| decimalPlaces | 小数位数 | number | `0` | — |
|
|||
|
|
| useGrouping | 使用千位分隔符 | boolean | `true` | `true` `false` |
|
|||
|
|
| separator | 分隔符 | string | `,` | — |
|
|||
|
|
| useEasing | 使用动画 | boolean | `true` | `true` `false` |
|
|||
|
|
| duration | 动画持续时间 | number | `2` | — |
|
|||
|
|
| prefix | 前缀 | string | — | — |
|
|||
|
|
| suffix | 后缀 | string | — | — |
|
|||
|
|
| option | 选项，用于多实例的总体设置，<br>props会覆盖option的属性，使用更灵活 | CountUpOptions | — | 参见[CountUpOptions](#opts) |
|
|||
|
|
|
|||
|
|
:::
|
|||
|
|
|
|||
|
|
|
|||
|
|
::: title CountUpOptions 属性
|
|||
|
|
:::
|
|||
|
|
|
|||
|
|
::: table
|
|||
|
|
|
|||
|
|
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|
|||
|
|
| ------------- | ------------------------------------------------------------ | -------------- | ------ | -------------- |
|
|||
|
|
| startVal | 开始值 | number | `0` | — |
|
|||
|
|
| decimalPlaces | 小数位数 | number | `0` | — |
|
|||
|
|
| useGrouping | 使用千位分隔符 | boolean | `true` | `true` `false` |
|
|||
|
|
| separator | 分隔符 | string | `,` | — |
|
|||
|
|
| useEasing | 使用动画 | boolean | `true` | `true` `false` |
|
|||
|
|
| duration | 动画持续时间 | number | `2` | — |
|
|||
|
|
| prefix | 前缀 | string | — | — |
|
|||
|
|
| suffix | 后缀 | string | — | — | |
|
|||
|
|
|
|||
|
|
:::
|
|||
|
|
|
|||
|
|
::: title countUp 插槽
|
|||
|
|
:::
|
|||
|
|
|
|||
|
|
::: table
|
|||
|
|
|
|||
|
|
| 名称 | 描述 | 参数 |
|
|||
|
|
| ----- | -------- | ---- |
|
|||
|
|
| prefix | 前缀 | -- |
|
|||
|
|
| suffix | 后缀 | -- |
|
|||
|
|
|
|||
|
|
:::
|