需求

由于input輸入框的number類(lèi)型不調(diào)好用,故通過(guò)自定義指令給element el-input組件設(shè)置輸入限制

功能

1.可設(shè)置允許輸入的最大最小值
2.可設(shè)置精度
3.限制非數(shù)值輸入

輸入限制

1.小數(shù)點(diǎn)"."不允許出現(xiàn)在第一位,且只允許輸入一次
2.負(fù)號(hào)"-"僅可以出現(xiàn)在第一位,且配置最小值允許出現(xiàn)負(fù)值時(shí)可用
3.限制輸入法的輸入事件

未實(shí)現(xiàn)功能TODO/(ㄒoㄒ)/~~

精度攔截目前在輸入時(shí)未做攔截
原因:在輸入框輸入達(dá)到精度限制時(shí),此時(shí)按ctrl+a想要執(zhí)行覆蓋選中重新輸入操作時(shí),輸入事件會(huì)判斷達(dá)到輸入精度做大值，無(wú)法執(zhí)行上述操作
替換方案:在輸入框失去焦點(diǎn)時(shí)做精度格式化

有解決方案的小伙伴歡迎解答 ??T_T

demo如下??

提供三個(gè)參數(shù)
{min: -100, max: 100, precision: 2}，
1.min最小值：默認(rèn)-100
2.max最小值：默認(rèn)100
3.precision精度（保留小位數(shù)）：默認(rèn)2

'懶人'提醒

可根據(jù)需求修改默認(rèn)值,或設(shè)置為null不做限制
只需將demo中對(duì)應(yīng)的監(jiān)聽(tīng)事件里 聲明的 _min 和 _max 和 _precision 改為想要的默認(rèn)值即可

//keypress下
let _precision = 2;
let _max = 100;
let _min = -100;
//keyup下
let _precision = 2;
let _max = 100;
let _min = -100;
//focusout
let _precision = 2;

<template>
  <div class="hello">
    <el-input
      type="text"
      v-model="test"
      v-only-number="{ min: -100, max: 100, precision: 2 }"
    ></el-input>
</template>

<script>
export default {
  name: "HelloWorld",
  directives: {
    onlyNumber: {
      // 只調(diào)用一次，第一次綁到元素時(shí)調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置。
      bind: function (el, vDir) {
        let dom = el.tagName == "INPUT" ? el : el.querySelector("input");
        dom.placeholder = "請(qǐng)輸入數(shù)值" + JSON.stringify(vDir.value);
      },
      // 當(dāng)被綁定的元素插入到 DOM 中時(shí)
      inserted: function (el, vDir) {
        let dom = el.tagName == "INPUT" ? el : el.querySelector("input");
        //記錄當(dāng)前值
        let content = dom.value;
        //插槽參數(shù)
        let config = vDir.value;

        /**
         * @function 輸入有效值監(jiān)聽(tīng)事件
         * @description 只允許輸入 數(shù)字/小數(shù)點(diǎn)/負(fù)號(hào)
         */
        el.addEventListener("keypress", (e) => {
          //阻止輸入
          function preventInput() {
            if (e.preventDefault) {
              e.preventDefault();
            } else {
              e.returnValue = false;
            }
          }
          let re = /\d|\.|-/; //只允許輸入 數(shù)字/小數(shù)點(diǎn)/負(fù)號(hào)
          let key = e.key; //輸入值
          content = e.target.value; //輸入值生效前的值
          //配置
          let _precision = 2;
          let _max = 100;
          let _min = -100;
          if (config) {
            _precision = parseInt(config.precision);
            _max = parseFloat(config.max);
            _min = parseFloat(config.min);
          }
          if (!re.test(key)) {
            preventInput();
          } else if ((content.indexOf(".") > 0 || !content) && key == ".") {
            // .不允許出現(xiàn)在第一位,且只允許輸入一次

            preventInput();
          } else if ((_min >= 0 || content) && key == "-") {
            // "-"號(hào)僅可以出現(xiàn)在第一位,且配置最小值允許出現(xiàn)負(fù)值

            preventInput();
          } else if (
            // 精度攔截
            content.split("").reverse().join("").indexOf(".") == _precision
          ) {
            // preventInput();
          }
        });
        el.addEventListener("keyup", (e) => {
          let value = e.target.value; //輸入值生效后的值
          //輸入非數(shù)值,keypress已過(guò)濾,此處過(guò)濾輸入法輸入中文情況
          if (isNaN(value) && value !== "-") {
            e.target.value = content;
            return false;
          }

          content = value;
          //精度
          let _precision = 2;
          let _max = 100;
          let _min = -100;
          if (config) {
            _precision = parseInt(config.precision);
            _max = parseFloat(config.max);
            _min = parseFloat(config.min);
          }

          if (value > _max) {
            e.target.value = _max;
            content = _max;
          }
          if (value < _min) {
            e.target.value = _min;
            content = _min;
          }
        });
        el.addEventListener("focusout", (e) => {
          let value = e.target.value;
          //精度
          let _precision = 2;
          if (config) {
            _precision = parseInt(config.precision);
          }
          e.target.value =
            value != "" ? parseFloat(value).toFixed(_precision) : "";

          dom.dispatchEvent(new Event("input"));
        });
      },
    },
  },
  data() {
    return {
      test: "",
    };
  },
  
  watch:{
    test(){
      console.log('watch test',this.test)
    }
  }
};

</script>