style(countup): 代码格式调整

This commit is contained in:
sight 2022-03-07 15:33:17 +08:00
parent 58e73036a1
commit f5aa9acc8f

View File

@ -6,10 +6,10 @@ export default {
<script setup lang="ts"> <script setup lang="ts">
import { computed, onMounted, Ref, ref, watch } from "vue"; import { computed, onMounted, Ref, ref, watch } from "vue";
import { TransitionPresets, useTransition } from '@vueuse/core' import { TransitionPresets, useTransition } from "@vueuse/core";
export interface LayCountupProps { export interface LayCountupProps {
startVal?:number // startVal?: number; //
endVal?: number; // endVal?: number; //
decimal?: string; // decimal?: string; //
decimalPlaces?: number; // decimalPlaces?: number; //
@ -26,16 +26,16 @@ export interface LayCountupProps {
const props = withDefaults(defineProps<LayCountupProps>(), { const props = withDefaults(defineProps<LayCountupProps>(), {
startVal: 0, startVal: 0,
endVal: 0, endVal: 0,
decimal: '.', decimal: ".",
decimalPlaces: 0, decimalPlaces: 0,
useGrouping: true, useGrouping: true,
separator: ',', separator: ",",
autoplay: true, autoplay: true,
useEasing: true, useEasing: true,
easingFn: TransitionPresets.easeInOutCubic, easingFn: TransitionPresets.easeInOutCubic,
duration: 2000, duration: 2000,
prefix: '', prefix: "",
suffix:'', suffix: "",
}); });
let localStartVal: Ref<number> = ref(props.startVal); let localStartVal: Ref<number> = ref(props.startVal);
@ -47,51 +47,54 @@ const isNumber = (val: string) => !isNaN(parseFloat(val));
* @param num 要格式化的数字 * @param num 要格式化的数字
* @returns 格式化后的数字 * @returns 格式化后的数字
*/ */
const formatNumber = (num: number | string): string =>{ const formatNumber = (num: number | string): string => {
if(typeof num != 'number')return '0'; if (typeof num != "number") return "0";
num = num.toFixed(props.decimalPlaces); num = num.toFixed(props.decimalPlaces);
num += ''; num += "";
const x = num.split('.'); const x = num.split(".");
let x1 = x[0]; let x1 = x[0];
const x2 = x.length > 1 ? props.decimal + x[1] : ''; const x2 = x.length > 1 ? props.decimal + x[1] : "";
const rgx = /(\d+)(\d{3})/; const rgx = /(\d+)(\d{3})/;
if (props.separator && !isNumber(props.separator)) { if (props.separator && !isNumber(props.separator)) {
while (rgx.test(x1)) { while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + props.separator + '$2'); x1 = x1.replace(rgx, "$1" + props.separator + "$2");
} }
} }
return props.prefix + x1 + x2 + props.suffix; return props.prefix + x1 + x2 + props.suffix;
} };
const printVal = useTransition(localStartVal, { const printVal = useTransition(localStartVal, {
delay: 0, delay: 0,
duration: props.duration, duration: props.duration,
disabled: !props.useEasing, disabled: !props.useEasing,
transition: typeof props.easingFn === "string" ? TransitionPresets[props.easingFn] : props.easingFn, transition:
}) typeof props.easingFn === "string"
? TransitionPresets[props.easingFn]
: props.easingFn,
});
const displayValue = computed(() => formatNumber(printVal.value)); const displayValue = computed(() => formatNumber(printVal.value));
const start = function(){ const start = function () {
localStartVal.value = props.endVal; localStartVal.value = props.endVal;
} };
watch( watch(
() => props.endVal, () => props.endVal,
() => { () => {
if(props.autoplay){ if (props.autoplay) {
localStartVal.value = props.endVal; localStartVal.value = props.endVal;
} }
} }
); );
onMounted(() => { onMounted(() => {
if(props.autoplay){ if (props.autoplay) {
start(); start();
} }
}); });
defineExpose({ defineExpose({
start, start,
}); });
</script> </script>
@ -99,6 +102,6 @@ defineExpose({
<template> <template>
<slot name="prefix"></slot> <slot name="prefix"></slot>
<!-- <span style="font-family: sans-serif" /> --> <!-- <span style="font-family: sans-serif" /> -->
<span >{{ displayValue }}</span> <span>{{ displayValue }}</span>
<slot name="suffix"></slot> <slot name="suffix"></slot>
</template> </template>