refactor(countup): 重构,移除 countup.js

example/docs/zh-CN/components/countup.md

@@ -7,8 +7,8 @@
 ::: demo
 
 <template>
-  <h1 style="padding:20px 15px">
+  <h1 style="padding:20px 15px; font-family: sans-serif">
-      <lay-count-up :end-val="countVal" :decimalPlaces="2"></lay-count-up>
+      <lay-count-up :startVal="0" :endVal="3600" :decimalPlaces="2"></lay-count-up>
   </h1>
 </template>
 
@@ -17,7 +17,7 @@ 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%">雷雨&nbsp</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` |
+| autoplay     | 是否自动播放                                                     | boolean        | `true` | `true` `false` |
-| duration      | 动画持续时间                                                 | number         | `2`    | —             |
+| 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
+::: describe 可使用贝塞尔曲线定义动画
-
-| 属性          | 描述                                                         | 类型           | 默认值 | 可选值         |
-| ------------- | ------------------------------------------------------------ | -------------- | ------ | -------------- |
-| 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         | —     | —             |   |
-
 :::
 
+```
+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
 :::

package.json

@@ -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",

src/component/countUp/index.vue

@@ -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 { computed, onMounted, Ref, ref, watch } from "vue";
-import { CountUp } from "countup.js";
+import { TransitionPresets, useTransition } from '@vueuse/core'
-import type { CountUpOptions } from "countup.js";
 
 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: () => {
+  decimal: '.',
-    return {};
+  decimalPlaces: 0,
-  },
+  useGrouping: true,
+  separator: ',',
+  autoplay: true,
+  useEasing: true,
+  easingFn: TransitionPresets.easeInOutCubic,
+  duration: 2000,
+  prefix: '',
+  suffix:'',
 });
 
-const counterRef = ref<HTMLDivElement | null>(null);
+let localStartVal: Ref<number> = ref(props.startVal);
-const instance = ref<CountUp | null>(null);
+const isNumber = (val: string) => !isNaN(parseFloat(val));
-const {
+
-  decimalPlaces,
+/**
-  useGrouping,
+ * from: https://github.com/PanJiaChen/vue-countTo/blob/master/src/vue-countTo.vue
-  separator,
+ * @description 格式化数字
-  useEasing,
+ * @param num 要格式化的数字
-  duration,
+ * @returns 格式化后的数字
-  prefix,
+ */
-  suffix,
+const formatNumber = (num: number | string): string =>{
-} = props;
+  if(typeof num != 'number')return '0';
-const defaultOptions: CountUpOptions = {
+  num = num.toFixed(props.decimalPlaces);
-  startVal: 0, // 开始数字
+  num += '';
-  decimalPlaces: decimalPlaces ? decimalPlaces : 0, // 小数位数
+  const x = num.split('.');
-  useEasing: useEasing ? useEasing : true, // 使用缓动动画
+  let x1 = x[0];
-  duration: duration ? duration : 2, // 动画持续时间
+  const x2 = x.length > 1 ? props.decimal + x[1] : '';
-  useGrouping: useGrouping ? useGrouping : true, // 是否使用千位分隔符
+  const rgx = /(\d+)(\d{3})/;
-  separator: separator ? separator : ",", // 千位分隔符
+  if (props.separator && !isNumber(props.separator)) {
-  decimal: ".", // 小数点分隔符
+    while (rgx.test(x1)) {
-  prefix: prefix ? prefix : "", // 前缀
+      x1 = x1.replace(rgx, '$1' + props.separator + '$2');
-  suffix: suffix ? suffix : "", // 后缀
+    }
-};
+  }
+  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 = () => {
+defineExpose({ 
-  if (!counterRef.value) return;
+  start,
-  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);
-};
 </script>
+
+<template>
+  <slot name="prefix"></slot>
+  <!-- <span style="font-family: sans-serif" /> -->
+  <span >{{ displayValue }}</span>
+  <slot name="suffix"></slot>
+</template>