hy-app 0.3.0 → 0.3.2

package/components/hy-count-to/hy-count-to.vue

@@ -16,26 +16,26 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-count-to',
+  name: "hy-count-to",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-import type { ICountToEmits } from './typing'
-import { computed, onMounted, ref, toRefs, watch } from 'vue'
-import type { CSSProperties, PropType } from 'vue'
-import { addUnit, isNumber } from '../../utils'
+import type { ICountToEmits } from "./typing";
+import { computed, onMounted, ref, watch } from "vue";
+import type { CSSProperties, PropType } from "vue";
+import { addUnit, isNumber } from "../../utils";
 
 /**
  * 一般用于需要滚动数字到某一个值的场景，目标要求是一个递增的值。
  * @displayName hy-count-to
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
@@ -73,7 +73,7 @@ const props = defineProps({
   /** 十进制分割 */
   decimal: {
     type: String,
-    default: '.',
+    default: ".",
   },
   /** 字体颜色 */
   color: String,
@@ -95,183 +95,189 @@ const props = defineProps({
   },
   /** 自定义外部类名 */
   customClass: String,
-})
-const { startVal, duration, endVal, autoplay, separator, useEasing, decimals, decimal } =
-  toRefs(props)
-const emit = defineEmits<ICountToEmits>()
+});
+const emit = defineEmits<ICountToEmits>();
 
 const formatNumber = (num: number): string => {
-  let numStr = ''
+  let numStr;
   // 将num转为Number类型，因为其值可能为字符串数值，调用toFixed会报错
-  num = Number(num)
-  numStr = num.toFixed(Number(decimals.value))
-  numStr += ''
-  const x = numStr.split('.')
-  let x1 = x[0]
-  const x2 = x.length > 1 ? decimal.value + x[1] : ''
-  const rgx = /(\d+)(\d{3})/
-  if (separator.value && !isNumber(separator.value)) {
+  num = Number(num);
+  numStr = num.toFixed(Number(props.decimals));
+  numStr += "";
+  const x = numStr.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' + separator.value + '$2')
+      x1 = x1.replace(rgx, "$1" + props.separator + "$2");
     }
   }
-  return x1 + x2
-}
+  return x1 + x2;
+};
 
-const localStartVal = ref(startVal.value)
-let displayValue = ref(formatNumber(startVal.value))
-const printVal = ref<number | null>(null)
-const paused = ref(false) // 是否暂停
-const localDuration = ref(Number(duration.value))
-const startTime = ref<number | null>(null) // 开始的时间
-const timestamp = ref<number | null>(null) // 时间戳
-const remaining = ref<number | null>(null) // 停留的时间
-const rAF = ref<number>() // 停留的时间
-const lastTime = ref(0) // 上一次的时间
+const localStartVal = ref(props.startVal);
+let displayValue = ref(formatNumber(props.startVal));
+const printVal = ref<number | null>(null);
+const paused = ref(false); // 是否暂停
+const localDuration = ref(Number(props.duration));
+const startTime = ref<number | null>(null); // 开始的时间
+const timestamp = ref<number | null>(null); // 时间戳
+const remaining = ref<number | null>(null); // 停留的时间
+const rAF = ref<number>(); // 停留的时间
+const lastTime = ref(0); // 上一次的时间
 
 const countDown = computed(() => {
-  return startVal.value > endVal.value
-})
+  return props.startVal > props.endVal;
+});
 
 watch(
-  () => startVal.value,
-  () => autoplay.value && start(),
-)
+  () => props.startVal,
+  () => props.autoplay && start(),
+);
 
 watch(
-  () => endVal.value,
-  () => autoplay.value && start(),
-)
+  () => props.endVal,
+  () => props.autoplay && start(),
+);
 
 onMounted(() => {
-  autoplay.value && start()
-})
+  props.autoplay && start();
+});
 
 const easingFn = (t: number, b: number, c: number, d: number) => {
-  return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b
-}
+  return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b;
+};
 
 const requestAnimationFrame = (callback: Function): number => {
-  const currTime = new Date().getTime()
+  const currTime = new Date().getTime();
   // 为了使setTimteout的尽可能的接近每秒60帧的效果
-  const timeToCall = Math.max(0, 16 - (currTime - lastTime.value))
+  const timeToCall = Math.max(0, 16 - (currTime - lastTime.value));
   const id = setTimeout(() => {
-    callback(currTime + timeToCall)
-  }, timeToCall) as unknown as number
-  lastTime.value = currTime + timeToCall
-  return id
-}
+    callback(currTime + timeToCall);
+  }, timeToCall) as unknown as number;
+  lastTime.value = currTime + timeToCall;
+  return id;
+};
 
 const cancelAnimationFrame = (id?: number) => {
-  clearTimeout(id)
-}
+  clearTimeout(id);
+};
 
 /**
  * @description 开始滚动数字
  * */
 const start = () => {
-  localStartVal.value = startVal.value
-  startTime.value = null
-  localDuration.value = duration.value
-  paused.value = false
-  rAF.value = requestAnimationFrame(count)
-}
+  localStartVal.value = props.startVal;
+  startTime.value = null;
+  localDuration.value = props.duration;
+  paused.value = false;
+  rAF.value = requestAnimationFrame(count);
+};
 
 /**
  * @description 暂定状态，重新再开始滚动；或者滚动状态下，暂停
  * */
 const reStart = () => {
   if (paused.value) {
-    resume()
-    paused.value = false
+    resume();
+    paused.value = false;
   } else {
-    stop()
-    paused.value = true
+    stop();
+    paused.value = true;
   }
-}
+};
 
 /**
  * @description 暂停
  * */
 const stop = () => {
-  cancelAnimationFrame(rAF.value)
-}
+  cancelAnimationFrame(rAF.value);
+};
 
 /**
  * @description 重新开始(暂停的情况下)
  * */
 const resume = () => {
-  if (!remaining.value) return
-  startTime.value = 0
-  localDuration.value = remaining.value
+  if (!remaining.value) return;
+  startTime.value = 0;
+  localDuration.value = remaining.value;
   if (printVal.value) {
-    localStartVal.value = printVal.value
+    localStartVal.value = printVal.value;
   }
-  requestAnimationFrame(count)
-}
+  requestAnimationFrame(count);
+};
 
 /**
  * @description 重置
  * */
 const reset = () => {
-  startTime.value = null
-  cancelAnimationFrame(rAF.value)
-  displayValue.value = formatNumber(startVal.value)
-}
+  startTime.value = null;
+  cancelAnimationFrame(rAF.value);
+  displayValue.value = formatNumber(props.startVal);
+};
 const count = (time_stamp: number) => {
-  if (!startTime.value) startTime.value = time_stamp
-  timestamp.value = time_stamp
-  const progress = time_stamp - startTime.value
-  remaining.value = localDuration.value - progress
-  if (useEasing.value) {
+  if (!startTime.value) startTime.value = time_stamp;
+  timestamp.value = time_stamp;
+  const progress = time_stamp - startTime.value;
+  remaining.value = localDuration.value - progress;
+  if (props.useEasing) {
     if (countDown.value) {
       printVal.value =
         localStartVal.value -
-        easingFn(progress, 0, localStartVal.value - endVal.value, localDuration.value)
+        easingFn(
+          progress,
+          0,
+          localStartVal.value - props.endVal,
+          localDuration.value,
+        );
     } else {
       printVal.value = easingFn(
         progress,
         localStartVal.value,
-        endVal.value - localStartVal.value,
+        props.endVal - localStartVal.value,
         localDuration.value,
-      )
+      );
     }
   } else {
     if (countDown.value) {
       printVal.value =
         localStartVal.value -
-        (localStartVal.value - endVal.value) * (progress / localDuration.value)
+        (localStartVal.value - props.endVal) * (progress / localDuration.value);
     } else {
       printVal.value =
         localStartVal.value +
-        (endVal.value - localStartVal.value) * (progress / localDuration.value)
+        (props.endVal - localStartVal.value) * (progress / localDuration.value);
     }
   }
   if (countDown.value) {
-    printVal.value = printVal.value < endVal.value ? endVal.value : printVal.value
+    printVal.value =
+      printVal.value < props.endVal ? props.endVal : printVal.value;
   } else {
-    printVal.value = printVal.value > endVal.value ? endVal.value : printVal.value
+    printVal.value =
+      printVal.value > props.endVal ? props.endVal : printVal.value;
   }
-  displayValue.value = formatNumber(printVal.value)
+  displayValue.value = formatNumber(printVal.value);
   if (progress < localDuration.value) {
-    rAF.value = requestAnimationFrame(count)
+    rAF.value = requestAnimationFrame(count);
   } else {
-    emit('end')
+    emit("end");
   }
-}
+};
 
 const destroyed = () => {
-  cancelAnimationFrame(rAF.value)
-}
+  cancelAnimationFrame(rAF.value);
+};
 
 defineExpose({
   start,
   stop,
   reStart,
   resume,
-})
+  reset,
+});
 </script>
 
 <style scoped lang="scss">
-@import './index.scss';
+@import "./index.scss";
 </style>

package/components/hy-count-to/typing.d.ts

@@ -2,49 +2,50 @@ export default interface HyCountToProps {
   /**
    * @description 开始的数值，默认从0增长到某一个数（默认 0 ）
    * */
-  startVal?: number
+  startVal?: number;
   /**
    * @description 要滚动的目标数值，必须 （默认 0 ）
    * */
-  endVal: number
+  endVal: number;
   /**
    * @description 滚动到目标数值的动画持续时间，单位为毫秒（ms） （默认
    * */
-  duration?: number
+  duration?: number;
   /**
    * @description 设置数值后是否自动开始滚动 （默认 true ）
    * */
-  autoplay?: boolean
+  autoplay?: boolean;
   /**
    * @description 要显示的小数位数，见官网说明（默认 0 ）
    * */
-  decimals?: number
+  decimals?: number;
   /**
    * @description 滚动结束时，是否缓动结尾，见官网说明（默认 true ）
    * */
-  useEasing?: boolean
+  useEasing?: boolean;
   /**
    * @description 十进制分割 （ 默认 "." ）
    * */
-  decimal?: string
+  decimal?: string;
   /**
    * @description 字体颜色（ 默认 '#606266' )
    * */
-  color?: string
+  color?: string;
   /**
    * @description 字体大小，单位px（ 默认 22 ）
    * */
-  fontSize?: number | string
+  fontSize?: number | string;
   /**
    * @description 字体是否加粗（默认 false ）
    * */
-  bold?: boolean
+  bold?: boolean;
   /**
    * @description 千位分隔符，见官网说明
    * */
-  separator?: string
+  separator?: string;
 }
 
 export interface ICountToEmits {
-  (e: 'end'): void
+  /** 结束执行函数 */
+  (e: "end"): void;
 }