本文將通過(guò)實(shí)例，簡(jiǎn)單介紹下“三位一撇”和判定數(shù)字的數(shù)量級(jí)，供參考。

〇、前言

本文將通過(guò)實(shí)例，簡(jiǎn)單介紹下“三位一撇”和判定數(shù)字的數(shù)量級(jí)，供參考。

效果如下圖：

一、具體實(shí)現(xiàn)

HTML 代碼如下：

<template>
  <div class="app-container TestPage">
    <!-- 彈窗 -->
    <el-dialog
      title="新增"
      width="500px"
      :visible.sync="showDialogAdd"
    >
      <el-form
        :model="formData"
        ref="formData"
        label-width="150px"
        class="demo-formData"
      >
        <el-form-item label="總額：" prop="hetongze" :rules="[{required: false, message: '請(qǐng)輸總額', trigger: 'change'}]">
          <el-input class="uniform-width-detail"
            v-model="formData.zonge" @input="ChangeInputZE"
            placeholder="非必填，請(qǐng)輸入大于 0 且最多兩位小數(shù)的數(shù)字"
          ></el-input>
          <span v-if="display_span_units">{{ units }}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmDialog()" :disabled="this.submitButtonDisabledAdd">提 交</el-button>
        <el-button @click="cancelAdd">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

js 代碼如下：

<script>
export default {
  name: "TestPage",
  components: {},
  data() {
    return {
      showDialogAdd:false,
      units:"",
        submitButtonDisabledAdd:false,
        formData:{},
        display_span_units:false,
    };
  },
  computed: { },
  methods: {
    ChangeInputZE(){
      const regex = /^[0-9,.]+$/ // /^\d{1,3}(,\d{3})*(\.\d+)?$/;
      // const regex = /^[0-9,.-]+$/ // 進(jìn)一步支持負(fù)數(shù)
      if (this.formData.zonge!=null&&this.formData.zonge.length>0 && (!regex.test(this.formData.zonge)||this.formData.zonge=="0")) {
        this.$message.warning("請(qǐng)輸入大于0的金額！")
        this.submitButtonDisabledAdd = true
        return
      }
      else{
        this.submitButtonDisabledAdd=false
      }
      if(this.formData.zonge!=""){
        this.formData.zonge=this.formData.zonge.replaceAll(",","") // 轉(zhuǎn)成純數(shù)字，校驗(yàn)大小
        if(this.formData.zonge!=null&&this.formData.zonge<=0){
          this.submitButtonDisabledAdd=true
        }
        if(this.formData.zonge!=null&&this.formData.zonge>0){
          this.units=this.getNumberUnit(Number(this.formData.zonge)) // 判斷數(shù)字級(jí)別
          if(this.units!=null&&this.units.length>0){
            this.display_span_units=true
          }else{
            this.display_span_units=false
          }
        }
        if(this.formData.zonge.indexOf(".")>=0){
          let htze_arr=this.formData.zonge.split(".")
          this.formData.zonge=this.moneyFormat(Number(htze_arr[0]))+"."+htze_arr[1]
        }
        else{
          this.formData.zonge=this.moneyFormat(this.formData.zonge)
        }
      }
      // 轉(zhuǎn)換成目標(biāo)樣式后，再進(jìn)行正則校驗(yàn)
      let regex2 = /^(\d{1,3}(,\d{3})*)(\.\d{1,2})?$/; // 支持三位一撇的數(shù)字
      // let regex2 = /^(-?\d{1,3}(,\d{3})*)(\.\d{1,2})?$/; // 進(jìn)一步支持負(fù)數(shù)
      if (this.formData.zonge!=null&&this.formData.zonge.length>0 && (!regex2.test(this.formData.zonge)||this.formData.zonge=="0")) {
        this.$message.warning("請(qǐng)輸入大于0且最多兩位小數(shù)的金額！");
        this.submitButtonDisabledAdd=true
        return;
      }
      else{
        this.submitButtonDisabledAdd=false
      }
    },
    // 數(shù)量級(jí)別判斷方法
    getNumberUnit(num) {
      if (typeof num !== 'number' || isNaN(num) || num < 10000) { // 小于一萬(wàn)，沒(méi)有對(duì)應(yīng)單位
        return undefined;
      }
      const units = [
        { value: 1e8, label: '億' }, // 還可以支持更高數(shù)量級(jí)
        { value: 1e7, label: '千萬(wàn)' },
        { value: 1e6, label: '百萬(wàn)' },
        { value: 1e5, label: '十萬(wàn)' },
        { value: 1e4, label: '萬(wàn)' },
      ];
      for (let i = 0; i < units.length; i++) {
        if (num >= units[i].value) {
          return units[i].label;
        }
      }
      return undefined;
    },
    // 三位一撇 具體實(shí)現(xiàn)代碼
    moneyFormat(num) {
      num = String(num)
      let symbol="";
      if(num.indexOf("-")>=0){ // 先將負(fù)號(hào)暫存
        num=num.replace("-","");
        symbol="-";
      }
      let arr = num.split("."); // 將小數(shù)點(diǎn)后的數(shù)字分開(kāi)存放，最后再進(jìn)行拼接
      let result = '';
      let count = 0;
      for (let i = arr[0].length - 1; i >= 0; i--) { // 從最右邊開(kāi)始，位數(shù)分別除以 3，余數(shù)為 0，就加逗號(hào)
        count++;
        result = arr[0][i] + result;
        if (count % 3 === 0 && i !== 0) {
          result = ',' + result;
        }
      }
      if(arr.length>1)
        return symbol + result + "." + arr[1]; // 拼接小數(shù)位的值
      else
        return symbol+result;
    },
  },
};
</script>