项目初始化

gaoluyang

4 天以前 92230c9a97dc9ce9df3313d11d26999c04bb6b26

 src/components/geek-xd/components/geek-statistic/geek-statistic.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,84 @@
<template>
    <view :style="labelStyle" class="title">{{ label }}</view>
    <view :style="numberStyle" class="number">{{ formatNumber(number,props.place) }}</view>
</template>
  
<script setup>
import { computed } from 'vue';

const props = defineProps({
    label: {
        type: String,
        default: "订单数量"
    },
    width: {
        type: Number,
        default: 300
    },
    labelColor: {
        type: String,
        default: '#white'
    },
    labelSize: {
        type: Number,
        default: 16
    },
    number: {
        type: Number,
        default: 80
    },
    numberColor: {
        type: String,
        default: 'red'
    },
    numberSize: {
        type: Number,
        default: 20
    },
    place: {
        type: Number,
        default: 2
    }
})
const labelStyle = computed(() => {
    return {
        width: `${props.width}rpx`,
        color: props.labelColor,
        fontSize: `${props.labelSize}px`
    }
})

const numberStyle = computed(() => {
    return {
        width: `${props.width}rpx`,
        color: props.numberColor,
        fontSize: `${props.numberSize}px`
    }
})

function formatNumber(num,place) {
    
    let fixedNum = Number(num).toFixed(place); // å°†æ•°å­—保留两位小数
    let parts = fixedNum.split('.'); // æ‹†åˆ†æ•´æ•°éƒ¨åˆ†å’Œå°æ•°éƒ¨åˆ†
    let integerPart = parts[0]; // æ•´æ•°éƒ¨åˆ†
    let decimalPart = parts[1]; // å°æ•°éƒ¨åˆ†

    // ä½¿ç”¨padStart方法补0到小数部分
    decimalPart = decimalPart.padStart(place, '0');

    return integerPart + '.' + decimalPart;
}


</script>
  
<style lang="scss" scoped>
.title {
    text-align: center;
}

.number {
    text-align: center;
}
</style>