基于el-input封装:只能输入数值,输入后每三位逗号分隔,四舍五入保留n位小数

这是一个Vue组件,名为`NumberFormatInput`,用于处理数字输入。组件提供了输入值的格式化,包括限制小数位数、禁止输入非数字字符、确保小数点唯一等。在用户输入、聚焦和失去焦点时,会触发相应的事件处理,如`on-change`和`input`。组件还允许自定义占位符,并支持前置、后置、前缀和后缀的内容插入。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<template>
  <el-input
    :value="value"
    :placeholder="placeholder"
    @input="handleInput"
    @focus="handleFocus"
    @blur="handleBlur"
  >
    <template slot="prepend">
      <slot name="prepend" />
    </template>
    <template slot="append">
      <slot name="append" />
    </template>
    <template slot="prefix">
      <slot name="prefix" />
    </template>
    <template slot="suffix">
      <slot name="suffix" />
    </template>
  </el-input>
</template>
<script>
export default {
  name: 'NumberFormatInput',
  components: {},
  props: {
    placeholder: {
      type: String,
      default: '请输入'
    },
    value: {
      type: String,
      default: ''
    },
    decimal: {
      // 保留小数位数
      type: Number,
      default: 2
    }
  },
  emits: ['on-change'],
  data() {
    return {
      input: ''
    }
  },
  computed: {
    decimalNum() {
      return Math.pow(10, this.decimal)
    }
  },
  watch: {},
  created() {},
  beforeMount() {},
  mounted() {},
  methods: {
    handleInput(value) {
      value = value.replace(/[^\d.-]/g, '') // 可以为负数
      value = value.replace(/^\./g, '') // 验证第一个字符是数字而不是.
      value = value.replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
      value = value.replace(/^(-)|-+/g, '$1') // - 只能在第一位
      value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.') // 保证.只出现一次,而不能出现两次以上
      this.$emit('input', value)
    },
    // 数值三位以,隔开
    format_number(n) {
      var b = parseInt(n).toString()
      var len = b.length
      if (len <= 3) {
        return b
      }
      var r = len % 3
      return r > 0
        ? b.slice(0, r) + ',' + b.slice(r, len).match(/\d{3}/g).join(',')
        : b.slice(r, len).match(/\d{3}/g).join(',')
    },
    handleFocus(e) {
      if (!e.target.value) return
      this.handleInput(e.target.value)
    },
    handleBlur(e) {
      if (!e.target.value) {
        this.$emit('input', '')
        this.$emit('on-change')
        return
      }
      let value = e.target.value
      value = String(Math.round(value * this.decimalNum) / this.decimalNum)
      let first = ''
      if (value[0] === '-') {
        first = '-'
        value = value.slice(1)
      }
      const left = this.format_number(value.split('.')[0])
      // const right = value.split('.')[1] || '0'.repeat(this.decimal) // 整数自动补0
      const right = value.split('.')[1] || ''
      // value = left + '.' + right // 自动补0可以一直有小数点
      value = first + left + (right ? '.' : '') + right // 整数不要小数点
      this.$emit('input', value)
      this.$emit('on-change')
    }
  }
}
</script>
<style lang="scss" scoped></style>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值