vue2 el-input-number 千分位显示的支持(不影响v-model的数值取值)


<!-- 增加v-thousands指令 -->
<el-input-number
    v-model="row.money"
    v-thousands
    :controls="false"
    :min="0"
    :precision="2"
    style="width: 100%"
/>
  
    // 添加全局指令或局部指令
    directives: {
      thousands: {
        inserted: function (el) {
          // 获取input节点
          if (el.tagName.toLocaleUpperCase() !== 'INPUT') {
            el = el.getElementsByTagName('input')[0]
          }

          // 初始化时,格式化值为千分位
          const numberValue = parseFloat(el.value.replace(/,/g, ''))
          if (!isNaN(numberValue)) {
            el.value = numberValue.toLocaleString('zh', {
              minimumFractionDigits: 2,
              maximumFractionDigits: 2,
            })
          }

          // 聚焦时转化为数字格式(去除千分位)
          el.onfocus = () => {
            el.value = parseFloat(el.value.replace(/,/g, '')).toFixed(2)
          }

          // 失去焦点时转化为千分位
          el.onblur = () => {
            const onBlurValue = parseFloat(el.value.replace(/,/g, ''))
            if (!isNaN(onBlurValue)) {
              el.value = onBlurValue.toLocaleString('zh', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2,
              })
            }
          }
        },
      },
    },

实现效果为获取焦点时显示数值,失去焦点显示千分位,获取v-model绑定的值为数值。如果想设置数值靠右显示,添加局部css:

<style lang="scss" scoped>
  ::v-deep .el-input-number .el-input__inner {
    text-align: right;
  }
</style>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值