refactor(countup): 重构,移除 countup.js
This commit is contained in:
sight
parent
d27179de02
commit
a7317265dc
@ -7,8 +7,8 @@
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<h1 style="padding:20px 15px">
|
||||
<lay-count-up :end-val="countVal" :decimalPlaces="2"></lay-count-up>
|
||||
<h1 style="padding:20px 15px; font-family: sans-serif">
|
||||
<lay-count-up :startVal="0" :endVal="3600" :decimalPlaces="2"></lay-count-up>
|
||||
</h1>
|
||||
</template>
|
||||
|
||||
@ -17,9 +17,9 @@ import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const countVal = 2862.9888;
|
||||
|
||||
return {
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -38,14 +38,14 @@ export default {
|
||||
<br/>
|
||||
<!-- 属性 -->
|
||||
<lay-card style="width:200px;height:120px;display:inline-block;">
|
||||
<h1 style="padding:20px 15px">
|
||||
<h1 style="padding:20px 15px; font-family: sans-serif">
|
||||
<lay-count-up :end-val="countVal2" prefix="¥" suffix="↑"></lay-count-up>
|
||||
</h1>
|
||||
</lay-card>
|
||||
<!-- 插槽 -->
|
||||
<lay-card style="width:200px;height:120px;display:inline-block;">
|
||||
<h1 style="padding:20px 15px">
|
||||
<lay-count-up :end-val="18" :duration="1">
|
||||
<lay-count-up :end-val="18" :duration="2000">
|
||||
<template #prefix>
|
||||
<span style="font-size:75%">雷雨 </span>
|
||||
</template>
|
||||
@ -84,15 +84,18 @@ export default {
|
||||
|
||||
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|
||||
| ------------- | ------------------------------------------------------------ | -------------- | ------ | -------------- |
|
||||
| startVal | 起始值 | number | `0` | — |
|
||||
| endVal | 显示的值 | number | `0` | — |
|
||||
| decimal | 小数点 | string | `.` | — |
|
||||
| decimalPlaces | 小数位数 | number | `0` | — |
|
||||
| useGrouping | 使用千位分隔符 | boolean | `true` | `true` `false` |
|
||||
| useGrouping | 是否使用千位分隔符 | boolean | `true` | `true` `false` |
|
||||
| separator | 分隔符 | string | `,` | — |
|
||||
| useEasing | 使用动画 | boolean | `true` | `true` `false` |
|
||||
| duration | 动画持续时间 | number | `2` | — |
|
||||
| autoplay | 是否自动播放 | boolean | `true` | `true` `false` |
|
||||
| useEasing | 是否使用动画 | boolean | `true` | `true` `false` |
|
||||
| easingFn | 动画类型 | Array \| Function \| string | `easeInOutCubic` | — |
|
||||
| duration | 动画持续时间,单位: ms | number | `2000` | — |
|
||||
| prefix | 前缀 | string | — | — |
|
||||
| suffix | 后缀 | string | — | — |
|
||||
| option | 选项，用于多实例的总体设置，<br>props会覆盖option的属性，使用更灵活 | CountUpOptions | — | 参见[CountUpOptions](#opts) |
|
||||
|
||||
:::
|
||||
|
||||
@ -108,23 +111,45 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title Count Up Options 属性
|
||||
::: title Count Up 动画类型
|
||||
:::
|
||||
|
||||
::: 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 | — | — | |
|
||||
|
||||
::: describe 可使用贝塞尔曲线定义动画
|
||||
:::
|
||||
|
||||
```
|
||||
easingFn: [0.75, 0, 0.25, 1]
|
||||
```
|
||||
|
||||
::: describe 也可以使用自定义函数
|
||||
:::
|
||||
|
||||
```
|
||||
const easeOutElastic = (n) => {
|
||||
return n === 0
|
||||
? 0
|
||||
: n === 1
|
||||
? 1
|
||||
: (2 ** (-10 * n)) * Math.sin((n * 10 - 0.75) * ((2 * Math.PI) / 3)) + 1
|
||||
}
|
||||
|
||||
easingFn: easeOutElastic
|
||||
```
|
||||
|
||||
::: describe 通过以下字符串快速设置动画类型
|
||||
:::
|
||||
|
||||
```
|
||||
easeInSine easeOutSine easeInOutSine
|
||||
easeInQuad easeOutQuad easeInOutQuad
|
||||
easeInCubic easeOutCubic easeInOutCubic
|
||||
easeInQuart easeOutQuart easeInOutQuart
|
||||
easeInQuint easeOutQuint easeInOutQuint
|
||||
easeInExpo easeOutExpo easeInOutExpo
|
||||
easeInCirc easeOutCirc easeInOutCirc
|
||||
easeInBack easeOutBack easeInOutBack
|
||||
linear
|
||||
```
|
||||
|
||||
::: previousNext countUp
|
||||
:::
|
||||
@ -40,7 +40,6 @@
|
||||
"@layui/layer-vue": "^1.3.5",
|
||||
"@vueuse/core": "^7.6.2",
|
||||
"async-validator": "^4.0.7",
|
||||
"countup.js": "^2.0.8",
|
||||
"evtd": "^0.2.3",
|
||||
"vue": "^3.2.31",
|
||||
"vue-i18n": "^9.1.9",
|
||||
|
||||
@ -1,9 +1,3 @@
|
||||
<template>
|
||||
<slot name="prefix"></slot>
|
||||
<span ref="counterRef" style="font-family: sans-serif" />
|
||||
<slot name="suffix"></slot>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "LayCountUp",
|
||||
@ -11,77 +5,100 @@ export default {
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch } from "vue";
|
||||
import { CountUp } from "countup.js";
|
||||
import type { CountUpOptions } from "countup.js";
|
||||
import { computed, onMounted, Ref, ref, watch } from "vue";
|
||||
import { TransitionPresets, useTransition } from '@vueuse/core'
|
||||
|
||||
export interface LayCountupProps {
|
||||
startVal?:number // 起始值
|
||||
endVal?: number; //显示的值
|
||||
decimal?: string; // 小数点
|
||||
decimalPlaces?: number; // 小数位数
|
||||
useGrouping?: boolean; // 是否使用千位分隔符
|
||||
separator?: string; // 千位分隔符
|
||||
autoplay?: boolean; //是否自动播放
|
||||
useEasing?: boolean; // 使用动画
|
||||
easingFn?: any; //动画类型
|
||||
duration?: number; // 动画持续时间
|
||||
prefix?: string; // 前缀
|
||||
suffix?: string; // 后缀
|
||||
option?: CountUpOptions; // 选项
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<LayCountupProps>(), {
|
||||
startVal: 0,
|
||||
endVal: 0,
|
||||
option: () => {
|
||||
return {};
|
||||
},
|
||||
decimal: '.',
|
||||
decimalPlaces: 0,
|
||||
useGrouping: true,
|
||||
separator: ',',
|
||||
autoplay: true,
|
||||
useEasing: true,
|
||||
easingFn: TransitionPresets.easeInOutCubic,
|
||||
duration: 2000,
|
||||
prefix: '',
|
||||
suffix:'',
|
||||
});
|
||||
|
||||
const counterRef = ref<HTMLDivElement | null>(null);
|
||||
const instance = ref<CountUp | null>(null);
|
||||
const {
|
||||
decimalPlaces,
|
||||
useGrouping,
|
||||
separator,
|
||||
useEasing,
|
||||
duration,
|
||||
prefix,
|
||||
suffix,
|
||||
} = props;
|
||||
const defaultOptions: CountUpOptions = {
|
||||
startVal: 0, // 开始数字
|
||||
decimalPlaces: decimalPlaces ? decimalPlaces : 0, // 小数位数
|
||||
useEasing: useEasing ? useEasing : true, // 使用缓动动画
|
||||
duration: duration ? duration : 2, // 动画持续时间
|
||||
useGrouping: useGrouping ? useGrouping : true, // 是否使用千位分隔符
|
||||
separator: separator ? separator : ",", // 千位分隔符
|
||||
decimal: ".", // 小数点分隔符
|
||||
prefix: prefix ? prefix : "", // 前缀
|
||||
suffix: suffix ? suffix : "", // 后缀
|
||||
};
|
||||
let localStartVal: Ref<number> = ref(props.startVal);
|
||||
const isNumber = (val: string) => !isNaN(parseFloat(val));
|
||||
|
||||
/**
|
||||
* from: https://github.com/PanJiaChen/vue-countTo/blob/master/src/vue-countTo.vue
|
||||
* @description 格式化数字
|
||||
* @param num 要格式化的数字
|
||||
* @returns 格式化后的数字
|
||||
*/
|
||||
const formatNumber = (num: number | string): string =>{
|
||||
if(typeof num != 'number')return '0';
|
||||
num = num.toFixed(props.decimalPlaces);
|
||||
num += '';
|
||||
const x = num.split('.');
|
||||
let x1 = x[0];
|
||||
const x2 = x.length > 1 ? props.decimal + x[1] : '';
|
||||
const rgx = /(\d+)(\d{3})/;
|
||||
if (props.separator && !isNumber(props.separator)) {
|
||||
while (rgx.test(x1)) {
|
||||
x1 = x1.replace(rgx, '$1' + props.separator + '$2');
|
||||
}
|
||||
}
|
||||
return props.prefix + x1 + x2 + props.suffix;
|
||||
}
|
||||
|
||||
const printVal = useTransition(localStartVal, {
|
||||
delay: 0,
|
||||
duration: props.duration,
|
||||
disabled: !props.useEasing,
|
||||
transition: typeof props.easingFn === "string" ? TransitionPresets[props.easingFn] : props.easingFn,
|
||||
})
|
||||
|
||||
const displayValue = computed(() => formatNumber(printVal.value));
|
||||
|
||||
const start = function(){
|
||||
localStartVal.value = props.endVal;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.endVal,
|
||||
() => {
|
||||
update(props.endVal);
|
||||
if(props.autoplay){
|
||||
localStartVal.value = props.endVal;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
createCounter();
|
||||
if(props.autoplay){
|
||||
start();
|
||||
}
|
||||
});
|
||||
|
||||
const createCounter = () => {
|
||||
if (!counterRef.value) return;
|
||||
const opts: CountUpOptions = Object.assign(defaultOptions, props.option);
|
||||
instance.value = new CountUp(counterRef?.value, props.endVal, opts);
|
||||
start();
|
||||
};
|
||||
|
||||
const start = () => {
|
||||
if (!instance.value) return;
|
||||
instance?.value.start();
|
||||
};
|
||||
|
||||
const update = (newEndVal: number) => {
|
||||
if (!instance.value) return;
|
||||
instance?.value.update(newEndVal);
|
||||
};
|
||||
defineExpose({
|
||||
start,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<slot name="prefix"></slot>
|
||||
<!-- <span style="font-family: sans-serif" /> -->
|
||||
<span >{{ displayValue }}</span>
|
||||
<slot name="suffix"></slot>
|
||||
</template>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user