cip-components/cip-form-input/basic/number/view.jsx

import { computed } from 'vue'
import { formInputViewProps } from '../../form-input-props'
import { getUsingConfig, isNotEmpty, addThousandSeparator } from '@cip/utils/util'
import { useCipConfig } from '@cip/components/hooks/use-cip-config'
export default {
  props: formInputViewProps,
  setup (props) {
    const cipConfig = useCipConfig()
    // 分隔符
    const separator = computed(() => {
      return getUsingConfig(props.config.separator, cipConfig.number.thousandSeparator)
    })
    // 精度
    const precision = computed(() => {
      return getUsingConfig(props.config.precision, cipConfig.number.precision)
    })
    // 展示数据
    const viewValue = computed(() => {
      let value = Number(props.modelValue)
      if (!isNaN(value)) {
        if (isNotEmpty(precision.value)) value = value.toFixed(precision.value)
        if (separator.value) value = addThousandSeparator(value, separator.value)
        return [value, props.config.unit]
      } else {
        return props.config.defaultValue ?? '-'
      }
    })
    return () => <div class={'basic-number--view'}>
      {viewValue.value}
    </div>
  }
}