mobile/src/components/numer/index.vue

<template>
  <div>
    <template v-if="props.isSimple">
      <div v-if="props.pre">{{ props.pre }}</div>
      <div class="font-bold mr-spacd4" :class="props.valueClass">
        {{ func.convert.nullView(props.value) }}
      </div>
      <div v-if="props.unit">{{ props.unit }}</div>
    </template>
    <template v-else>
      <div v-if="props.pre">{{ props.pre }}</div>
      <div v-if="func.isnull(props.value)">
        {{ func.convert.nullView(props.value) }}
      </div>
      <div class="mr-spacd4" v-else>
        <div class="font-bold b-fz" v-if="numer.integer">{{ numer.integer }}</div>
        <div class="font-bold" v-if="numer.decimal">{{ numer.decimal }}</div>
      </div>
      <div v-if="numer.unit">{{ numer.unit }}</div>
    </template>
  </div>
</template>
<script lang="ts" setup>
type Numer = { integer?: string; decimal?: string; unit: string }
const props = withDefaults(
  defineProps<{
    isSimple?: boolean
    value?: number | string
    pre?: string
    unit?: string
    valueClass: string[]
  }>(),
  {
    value: '',
    unit: '',
  },
)
const numer = computed(() => {
  if (props.isSimple) return
  const arr = props.value.toString().split('.')
  return {
    integer: arr[0],
    decimal: arr[1] ? '.' + arr[1] : '',
    unit: props.unit,
  } as Numer
})
</script>

<style lang="scss" scoped>
div,
view {
  display: inline-block;
}
</style>