Bootstrap

给输入框数字实时添加千分位符，二次封装为金额组件

需求

1.输入数字时添加千分位
2.展示数字的最高位单位便于查看
3.为了方便使用，结合element ui的input框进行封装

实时添加千分位

html部分

<el-input
      ref="money"
      v-model.trim="money"
      :placeholder="placeholder"
      @keyup.enter.native="moneyChange()"
      @blur="moneyChange()"
    />

添加千分位的方法

    fmresource(s) {
      if (s === '' || s === null || s === '.00' || s === undefined) { //当数字不存在时
        return ''
      }
      if (s === '-') {
        return '-'
      }
      var lose = ''// 负号
      if (s < 0) { // 判断是否是负数
        s = (s + '').substring(1)// 截取-号
        lose = '-'
      }
      s = s + ''
      var l = s.split('.')[0].split('').reverse(); var r = ''; var t = ''
      if (s.indexOf('.') > -1) {
        if (s.split('.')[1] !== null && s.split('.')[1] !== undefined) {
          if (s.split('.')[1].length > 2) { //保留两位小数
            s = Number(s).toFixed(2)
          }
          r = ('.' + s.split('.')[1]) //取到小数部分
        } else {
          r = ''
        }
      }
      for (let i = 0; i < l.length; i++) {
        t += l[i] + ((i + 1) % 3 === 0 && (i + 1) !== l.length ? ',' : '') //分成三位一段
      }
      return lose + '' + t.split('').reverse().join('') + r// 拼接
    },

输入时实时获取光标位置，并调用添加千分位方法

    formatNumber(value, name) {
      this.$emit('update:data', value)
      value = value + ''
      // 获取input的dom对象，这里因为用的是element ui的input，所以需要这样拿到
      const input = this.$refs[name].$el.getElementsByTagName('input')[0]
      // 获取当前光标的位置
      const cursorIndex = input.selectionStart
      // 字符串中光标之前-的个数
      const lineNumOfCursorLeft = (value.slice(0, cursorIndex).match(/,/g) || []).length
      // 去掉所有,的字符串
      const noLine = value.replace(/,/g, '')
      // 重新格式化
      const newvalue = this.fmresource(noLine.replace(/[^\d\.-]/g, ''))
      // 改后字符串中原光标之前，的个数
      const newLineNumOfCursorLeft = (newvalue.slice(0, cursorIndex).match(/,/g) || []).length
      // 光标在改后字符串中应在的位置
      const newCursorIndex = cursorIndex + newLineNumOfCursorLeft - lineNumOfCursorLeft
      // 赋新值，nextTick保证-不能手动输入或删除，只能按照规则自动填入
      this.$nextTick(() => {
        this.money = newvalue
        // 修正光标位置，nextTick保证在渲染新值后定位光标
        this.$nextTick(() => {
        // selectionStart、selectionEnd分别代表选择一段文本时的开头和结尾位置
          input.selectionStart = newCursorIndex
          input.selectionEnd = newCursorIndex
        })
      })
    }

位数提示

使用element ui的tooltip，展示最高位单位，方便使用
html部分

<el-tooltip effect="dark" :content="tooltips" placement="top">
    <el-input
      ref="money"
      v-model.trim="money"
      :placeholder="placeholder"
      @keyup.enter.native="moneyChange()"
      @blur="moneyChange()"
    >
    </el-input>
  </el-tooltip>

添加计算属性

computed: {
    tooltips() {
      const result = Math.abs(parseFloat((this.money + '').replace(/,/g, ''))) //去除千分位分隔符
      const content = ['个', '十', '百', '千', '万', '十万', '百万', '千万', '亿', '十亿', '百亿', '千亿', '万亿']
      if (content[parseInt(Math.log10(result))] !== undefined) { return '当前最高位数：' + content[parseInt(Math.log10(result))] } else return '......'
    }
  }

在element ui的input基础上封装组件

由于项目中用到金额输入框较多，因此封装成组件便于调用
用v-bind="$attrs"以及v-on="$listeners"接收不作为 prop 的属性和事件

  • vm.$attrs 是一个属性，其包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)
  • 这些未识别的属性可以通过 v-bind="$attrs" 传入内部组件。
  • 未识别的事件可通过v-on="$listeners"传入

子组件

<template>
  <el-tooltip effect="dark" :content="tooltips" placement="top">
    <el-input
      ref="money"
      v-model.trim="money"
      :placeholder="placeholder"
      v-bind="$attrs"
      v-on="$listeners"
      @input="formatNumber(money,'money')"
      @keyup.enter.native="moneyChange()"
      @blur="moneyChange()"
    >
      <template v-if="template === 'append'" slot="append">元</template>
    </el-input>
  </el-tooltip>
</template>

<script>
export default {
  name: 'MoneyInput',
  props: {
    value: {
      type: null,
      required: true
    },
    placeholder: {
      type: String,
      default: '请输入金额'
    },
    enterFuc: {
      type: Function,
      default: () => {}
    },
    data: {
      type: null,
      default: null
    },
    template: {  //是否展示单位
      type: String,
      default: ''
    }
  },
  data() {
    return {
      money: this.value,
      content: ['个', '十', '百', '千', '万', '十万', '百万', '千万', '亿', '十亿', '百亿', '千亿', '万亿']
    }
  },
  computed: {
    tooltips() {
      const result = Math.abs(parseFloat((this.money + '').replace(/,/g, '')))
      if (this.content[parseInt(Math.log10(result))] !== undefined) { return '当前最高位数：' + this.content[parseInt(Math.log10(result))] } else return '......'
    }
  },
  watch: {
    value(newValue, oldValue) {
      this.money = newValue
      this.formatNumber(this.money, 'money')
    }
  },
  mounted() {
    this.formatNumber(this.money, 'money')
  },
  methods: {
    fmresource(s) {
      if (s === '' || s === null || s === '.00' || s === undefined) {
        return ''
      }
      if (s === '-') {
        return '-'
      }
      var lose = ''// 负号
      if (s < 0) { // 判断是否是负数
        s = (s + '').substring(1)// 截取-号
        lose = '-'
      }
      s = s + ''
      // n = n > 0 && n <= 20 ? n : 2;.toFixed(n)
      // s = parseFloat((s + "").replace(/^[^\d.-]/g, "")) + "";
      var l = s.split('.')[0].split('').reverse(); var r = ''; var t = ''
      if (s.indexOf('.') > -1) {
        if (s.split('.')[1] !== null && s.split('.')[1] !== undefined) {
          if (s.split('.')[1].length > 2) {
            s = Number(s).toFixed(2)
          }
          r = ('.' + s.split('.')[1])
        } else {
          r = ''
        }
      }
      for (let i = 0; i < l.length; i++) {
        t += l[i] + ((i + 1) % 3 === 0 && (i + 1) !== l.length ? ',' : '')
      }
      return lose + '' + t.split('').reverse().join('') + r// 拼接
    },
    formatNumber(value, name) {
      this.$emit('update:data', value)
      value = value + ''
      // 获取input的dom对象，这里因为用的是element ui的input，所以需要这样拿到
      const input = this.$refs[name].$el.getElementsByTagName('input')[0]
      // 获取当前光标的位置
      const cursorIndex = input.selectionStart
      // 字符串中光标之前-的个数
      const lineNumOfCursorLeft = (value.slice(0, cursorIndex).match(/,/g) || []).length
      // 去掉所有,的字符串
      const noLine = value.replace(/,/g, '')
      // 重新格式化
      const newvalue = this.fmresource(noLine.replace(/[^\d\.-]/g, ''))
      // .replace(/(\d{4})/g, '$1 ').replace(/ $/, '')
      // 改后字符串中原光标之前，的个数
      const newLineNumOfCursorLeft = (newvalue.slice(0, cursorIndex).match(/,/g) || []).length
      // 光标在改后字符串中应在的位置
      const newCursorIndex = cursorIndex + newLineNumOfCursorLeft - lineNumOfCursorLeft
      // 赋新值，nextTick保证-不能手动输入或删除，只能按照规则自动填入
      this.$nextTick(() => {
        this.money = newvalue
        // 修正光标位置，nextTick保证在渲染新值后定位光标
        this.$nextTick(() => {
        // selectionStart、selectionEnd分别代表选择一段文本时的开头和结尾位置
          input.selectionStart = newCursorIndex
          input.selectionEnd = newCursorIndex
        })
      })
    },
    moneyChange() {
      const v = this.money ? (this.money + '').replace(/,/g, '').replace(new RegExp(/(\d+)(\.)(\d*)(\2*)(\d*)/g), '$1$2$3$5') : 0
      const money = Object.is(Number(v), NaN) ? 0 : Number(v)
      this.$emit('input', money)
      this.enterFuc()
    }

  }
}
</script>

父组件中 除了增加的参数外，其他参数用法及作用与element ui相同

<money-input v-model="form.showresource" :disabled="resourceDisabled" template="append" style="width: 100%" />

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
React 基础-创建元素
SpringBoot-12-拦截器
flutter 使用wechat_assets_picker的权限检测
论文翻译 || openpose -- Realtime Multi-Person 2D Pose Estimation using Part Affinity Fields
《第八周实验报告任务2》
ECharts数据可视化
day06-Maven
NXP（I.MX6uLL） UART串口通信实验&串口格式化函数移植实验
MyCat详细安装(RDS云数据库版)
Flask学习总结笔记（12） -- 利用ajax进行前后端数据交互
;