vue3中金额的回显及封装金额输入框组件

1、在项目中回显带千分号的金额格式

/**
 *  金额千分位加逗号，保留2位小数，不足补零，否则四舍五入
* 参数说明：
* num：要格式化的数字 string或者number
* decimals：保留几位小数，默认2位
* thousandsSep：千分位符号，默认为','
* return 金额格式的字符串,如'1,234,567.45'
* */
export function addAllSpace (num, decimals=2, thousandsSep=',') {
  if (isNaN(num)) {
    num = '0.00'
  }
  let prec = !isFinite(+decimals) ? 0 : Math.abs(decimals) // 保留的位数一定是有限位数的正整数
  let sep =thousandsSep
  let s = num.toString().replace(/,/g, '') // 字符串，将，变成'';
  let p = parseFloat(s) // 解析一个字符串，并返回一个浮点数
  let n = isNaN(p) ? 1 : p
  let formatNum = n.toFixed(prec).toString().replace(/(\d)(?=(\d{3})+\.)/g, function ($0, $1) {
    return $1 + sep
  })
  return formatNum
}

2、封装金额输入框组件并使用
第一步：安装依赖文件

yarn add vue-currency-input

第二步：封装组件，创建CurrencyInput.vue

<template>
    <input
        ref="inputRef"
        type="text"
        placeholder="请输入..."
        :disabled="disabled"
        class="currencyInput"
    />
</template>

<script>
    /**
     * @date 2023-06-20
     * @Description: 金额输入框组件
     */
    import { useCurrencyInput } from "vue-currency-input"
    import { watchDebounced } from '@vueuse/core'

    export default {
        name: "CurrencyInput",
        props: {
            modelValue: [Number,String],
            options: Object,
            disabled:{
                type:Boolean,
                default:false
            }
        },
        setup(props,{emit}) {
          const { inputRef, numberValue } = useCurrencyInput(props.options, false)
          watchDebounced(numberValue, (value) => emit('update:modelValue', value), { debounce: 1000 })
          return { inputRef };
        }
    }
</script>

<style scoped lang="scss">
.currencyInput{
  width: 100%;
  line-height: 32px;
  height: 32px;
  box-sizing: border-box;
  padding: 1px 11px;
  border-radius: 4px;
  border:1px solid #dcdfe6;
  color:#606266;
  background-color: #ffffff;
  background-image: none;
  outline: 0;
  &:hover{
    border:1px solid #c0c4cc;
  }
  &:focus{
    border:1px solid #409eff;
  }
  &:disabled{
    color:#a8abb2;
    -webkit-text-fill-color: #a8abb2;
    background-color: #f5f7fa;
    cursor: not-allowed;
    border:1px solid #dcdfe6;
  }
}
</style>

第三步：使用组件，更多的options配置项请参考官方文档。这里只列出我用到的一些配置项。

<template>
  <CurrencyInput
      v-model="value"
      :options="{
        currency: 'EUR', //必填项。ISO 4217 货币代码，例如：'USD'、'EUR'
        precision:2, //精度
        currencyDisplay: 'hidden', //如何以货币格式显示货币，可传'symbol','narrowSymbol','code','name','hidden'
        hideGroupingSeparatorOnFocus: false  //是否鼠标聚焦时隐藏分隔符
      }"
  />
  <p>
    Number value: <code>{{ value }}</code>
  </p>
</template>

<script>
import CurrencyInput from "@/components/CurrencyInput.vue";

export default {
  components: {CurrencyInput},
  data() {
    return {
      value: 1234,
    };
  },
};
</script>

<style scoped lang="scss">
</style>

第四步：效果如下