Vue 数字输入框,输入自动并且同步转换为货币格式

CaiGou · 2017年08月17日 · 735 次阅读

小弟我没有Vue的开发经验,只是前几天面试的时候。公司给我出了这么一个题,我就一边看文档一边自己写了一下。 代码风格没有,就是想到啥就写了啥。

可控制输入的最大值。

这个组件主要是利用了VUE的数据双向绑定。

逻辑图

通过watch来监听Input所绑定的数据,该数据的变化触发我的saveNum方法。

saveNum 中又分别调用以下方法:

  1. toNumber //目的在于将输入框的内容去掉$以及,,然后得到一个浮点型数字
  2. formatMoney // 把数字格式化成货币形式
    • 拿到整数部分进行一个长度大于3的判断
    • 再把获取到长度除以3进行求余
    • 把整数部分转为字符串后,利用substr方法能拿到从0到余数位置的这段字符
    • 然后再把剩下的字符串三个一组进行划分,并且在其后面添加,号
    • 最后是小数部分不等于0的话,先用toFixed(2)保留两位小数,再把小数转成字符串并且从位置1开始截取,相当于删除了小数的0开头,得到一个.12形式的字符串
    • 最后把三个字符串拼接起来返回
    • toNumber 可以得到一个数字,那么把值存进moneyNum中,moneyNum只绑定了一个p的元素,暂时作为显示效果用。

然后使用formatMoneymoneyNum的值格式化以后 返回得到一个 货币字符串,再把这个字符串赋值给money.

因为input使用了v-model来绑定money这个值,所以当money变化的时候会把结果显示在输入框内。

<template>
  <div class="money">
    <input type="text" v-model="money">
    <p>{{ moneyNum}}</p>
  </div>
</template>

<script>
export default {
  name: 'moneyinput',
  data () {
    return {
      money: "",
      moneyNum: 0,
      maxValue: 9999999
    }
  },
  methods: {
    formatMoney: function(number){
      if(!number){
        return '';
      }
      // 拿到整数部分
      let i = parseInt(number.toFixed(2), 10);
      let dec = number - i;
      // 整除3的时候补上一个分隔符
      let j = (j = i.length) > 3 ? j % 3 : 0; //拿到余数,从0到余数开始加分隔符
      return "$" + (j ? i.toString().substr(0, j) + "," : "") + i.toString().substr(j).replace(/(\d{3})(?=\d)/g, "$1" + ",") + (dec != 0 ? parseFloat(dec.toFixed(2)).toString().slice(1) : "");
    },

    toNumber: function(str) {
      return str.replace(/^\$/, '').replace(/,/g, '');
    },
    saveNum: function(input){

      // 存值为数字
      input == '' ? this.moneyNum = 0 :this.moneyNum = parseFloat(this.toNumber(this.money));

      // 限制最大值
      this.moneyNum = this.moneyNum > this.maxValue ? this.maxValue : this.moneyNum;

      //防止输入.的时候更新数据
      if(input.substr(input.length - 1) == ".") return;

      // 把数值格式化以后还原到input框内
      this.money = this.formatMoney(this.moneyNum);
    }
  },
  watch: {
    //监听money的值,发生改变调用saveNum
    money: 'saveNum'
    }
  }

</script>

<style>
input {
  text-align: right;
}
</style>
暂无回复。
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册