使用Vant+JS实现自定义金额键盘 文字超出宽度自动缩小及添加千位分隔符

<template>
  <div class="main">
    <div class="big">
      <div class="value_big" id="value_big">
        <span class="buy_value" id="buy_value" style="font-size: 40px;">{{payNum || '0'}}<span class="dw_title">元</span></span>
      </div>
    </div>
    <div class="buy_big">
      <van-grid :border="false" :column-num="3" :clickable="true" class="van_grid">
        <van-grid-item @click="toPayNum('1')" class="van_grid_item">
          <span class="pay_num">1</span>
        </van-grid-item>
        <van-grid-item @click="toPayNum('2')" class="van_grid_item">
          <span class="pay_num">2</span>
        </van-grid-item>
        <van-grid-item @click="toPayNum('3')" class="van_grid_item">
          <span class="pay_num">3</span>
        </van-grid-item>
        <van-grid-item @click="toPayNum('4')" class="van_grid_item">
          <span class="pay_num">4</span>
        </van-grid-item>
        <van-grid-item @click="toPayNum('5')" class="van_grid_item">
          <span class="pay_num">5</span>
        </van-grid-item>
        <van-grid-item @click="toPayNum('6')" class="van_grid_item">
          <span class="pay_num">6</span>
        </van-grid-item>
        <van-grid-item @click="toPayNum('7')" class="van_grid_item">
          <span class="pay_num">7</span>
        </van-grid-item>
        <van-grid-item @click="toPayNum('8')" class="van_grid_item">
          <span class="pay_num">8</span>
        </van-grid-item>
        <van-grid-item @click="toPayNum('9')" class="van_grid_item">
          <span class="pay_num">9</span>
        </van-grid-item>
        <van-grid-item @click="toPayNum('.')" class="van_grid_item">
          <span class="pay_num">.</span>
        </van-grid-item>
        <van-grid-item @click="toPayNum('0')" class="van_grid_item">
          <span class="pay_num">0</span>
        </van-grid-item>
        <van-grid-item @click="toPayNum('delete')" class="van_grid_item">
          <van-icon name="close" size="22"/>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>
<script>
import 'element-ui/lib/theme-chalk/index.css'

export default {
  data() {
    return {
      payNum:null,
      parentWidth:null,
      isDelete:false
    }
  },
  mounted() {
			var me = this;
      //获取父级的宽度
      let el= document.getElementById('value_big');
      me.parentWidth = el.getBoundingClientRect().width;
  },
  methods: {
    toPayNum(value){
      var me = this;
      //如果是删除
      if(value == 'delete'){
        //如果不为空
        if(me.payNum){
          //删除最后一个字符
          me.payNum = me.payNum.substring(0,me.payNum.length-1);
        }
        if(me.payNum == ''){
          me.payNum = null;
        }
        //是否为删除标识
        me.isDelete = true;
      }else{
        //如果金额为空并且要输入0 就不做处理
        if(!me.payNum && value == '0'){

        }else{//否则就拼接到后面
          me.payNum += value;
        }
        //是否删除标识
        me.isDelete = false;
      }
      //如果不为空
      if(me.payNum){
        var val = me.payNum;
        val = val.replace(/[^\d.]/g, ''); // 只允许数字和小数点
        val = val.replace(/^0+/,'0'); // 如果以多个0开头，则只保留一个0
        val = val.replace(/^\./, '0.'); // 如果以小数点开头，加上前导零
        val = val.replace(/\.{2,}/g, '.'); // 不能连续输入多个小数点
        val = val.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.'); // 只允许一个小数点
        if (/^0[1-9]/.test(val)) { // 如果以0开头并且不是小数，则只保留第一个0
          val = val.substring(0, 1);
        }
        var parts = val.split('.');
        parts[0] = parts[0].replace(/(\d)(?=(\d{3})+$)/g, '$1,'); // 添加千位分隔符
        if(parts.length > 1){
          parts[1] = parts[1].substring(0,2); // 小数部分只取两位
        }
        me.payNum = parts.join('.');
        //调用判断宽度方法
        me.changeText();
      }
    },
    changeText(){
      var me = this;
      //获取金额的宽度
      let childWidth= document.getElementById('buy_value').getBoundingClientRect().width;
      //父级的宽度
      var parentWidth = me.parentWidth;
      //金额的宽度大于或等于父级的宽度的时候 减小字体
      if(childWidth >= parentWidth){
        //获取金额的字体大小
        var x = document.getElementById("buy_value").style.fontSize;
        //获取出来的字体大小是带有px的 去除掉
        x = x.replaceAll('px','')
        //按照比例缩小金额的字体
        var fontsize = (x/1.2)+'px';
        var buy_value = document.getElementById('buy_value');
        buy_value.style.fontSize = fontsize;
      }
      //如果是删除（代表点击了删除按键）
      if(me.isDelete == true){
        //如果金额宽度小于父级宽度的80%
        if(childWidth < (parentWidth * 0.8)){
          //获取金额的字体大小
          var x = document.getElementById("buy_value").style.fontSize;
          //获取出来的字体大小是带有px的 去除掉
          x = x.replaceAll('px','')
          var fontsize;
          //如果字体放大小于原本默认的字体大小 直接放大
          if(x*1.2 < 40){
            fontsize = (x*1.2)+'px';
          }else{//否则就等于默认的大小
            fontsize = 40 + 'px'
          }
          //放大金额的字体
          var buy_value = document.getElementById('buy_value');
          buy_value.style.fontSize = fontsize;
          return;
        }
      }
    }
  }
}
</script>

<style scoped>
@import '../../assets/css/quill.bubble.css';
@import '../../assets/css/quill.snow.css';
</style>
<style lang="scss" scoped>
  .main{
    min-height: 100vh;
    background-color: #ffffff;
  }
  .big{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .hl_title{
    width: 100%;
    text-align: center;
    color: #7A7A7A;
    font-size: 14px;
    margin-top: 20px;
  }
  .value_big{
    width: 60%;
    margin-top: 100px;
    text-align: center;
  }
  .buy_value{
    white-space: nowrap;
    color: #000000;
    font-size: 40px;
  }
  .pay_num{
    color: #000000;
    font-size: 20px;
    font-weight: bold;
  }
  .dw_title{
    color: #000000;
    font-size: 20px;
    margin-left: 4px;
  }
  .buy_big{
    width: 100%;
    position: absolute;
    bottom: 30px;
    z-index: 99;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .van_grid{
    width: 100%;
  }
  .van_grid_item{
    box-shadow: 1px 1px 5px #ececec;
    border-radius: 5px;
  }
  .login_btn{
    width: 90%;
    height: 46px;
    line-height: 46px;
    text-align: center;
    border-radius: 5px;
    color: #ffffff;
    font-size: 15px;
    background-image: linear-gradient(to right , #339DFF,#FF7037);
    margin-top: 30px !important;
  }
</style>