Quasar 2 Vue.js千分位掩码可选小数位功能异常问题

Quasar自带的掩码字符串#,###,###,###,###.##会强制填充小数位，导致未输入小数时也显示.00，要实现「仅输入小数时才显示小数部分」的效果，不能直接依赖默认掩码，得用自定义格式化与解析逻辑：

实现方案 #

通过formatter和parser两个自定义函数，配合unmasked-value属性来控制显示与绑定值的转换：

组件代码 #

<q-input
  v-model="column"
  prefix="$"
  persistent
  reverse-fill-mask
  unmasked-value
  :formatter="formatNumber"
  :parser="parseNumber"
/>

自定义函数实现 #

在组件的methods中定义格式化和解析逻辑：

methods: {
  formatNumber(value) {
    if (!value) return ''
    const num = Number(value)
    // 处理整数情况，仅添加千分位
    if (num === 0) return '0'
    if (Number.isInteger(num)) {
      return num.toLocaleString('en-US')
    }
    // 处理带小数的情况，保留最多两位并去除末尾多余的0
    const [integerPart, decimalPart] = num.toString().split('.')
    const formattedInteger = parseInt(integerPart).toLocaleString('en-US')
    let trimmedDecimal = decimalPart.slice(0, 2).replace(/0+$/, '')
    // 小数部分为空则不显示小数点
    return trimmedDecimal ? `${formattedInteger}.${trimmedDecimal}` : formattedInteger
  },
  parseNumber(value) {
    if (!value) return ''
    // 移除前缀$和千分位逗号，转换为数值
    const cleanedValue = value.replace(/^\$|,/g, '')
    return Number(cleanedValue) || ''
  }
}

说明 #

• formatter：将绑定的原始数值转换为带千分位的显示文本，整数仅展示千分位，有小数时保留最多两位有效小数（自动去除末尾的0），无小数则不显示小数点。
• parser：将用户输入的格式化文本（如$1,234.5）转换回原始数值，确保v-model绑定的是纯数字而非格式化字符串。
• unmasked-value：保证v-model始终绑定原始数值，而非格式化后的带符号/逗号的字符串。

内容的提问来源于stack exchange，提问作者Code Embassy