vue之input表单限制输入的（-0~9.这种格式）

vue之input表单限制输入的（-0~9.这种格式）

Input.vue

<!-- 只是针对 现金流补录 输入框input的值的限制 -->
<template>
  <div class="input_wrap">
    <!-- {{ inputComfig.startAmt }} -->
    <el-input
      class="input"
      @input="startInput(inputComfig.startAmt, numRange.min, numRange.max)"
      @blur="startBlur(inputComfig.startAmt)"
      @focus="startFocus(inputComfig.startAmt)"
      v-model="inputComfig.startAmt"
      :placeholder="placeholder"
    ></el-input>
    <div class="interval">~</div>
    <!-- {{ inputComfig.endAmt }} -->
    <el-input
      class="input"
      @input="endInput(inputComfig.endAmt, numRange.min, numRange.max)"
      @blur="endBlur(inputComfig.endAmt)"
      @focus="endFocus(inputComfig.endAmt)"
      v-model="inputComfig.endAmt"
      :placeholder="placeholder"
    ></el-input>
  </div>
</template>

<script>
export default {
  // 组件参数配置
  /**
 * inputComfig：input的配置参数 inputComfig :{ startAmt:"", endAmt:""} -> 起始值 && 结束值
 * numRange ： input的输入值范围 分三种类型
 * * numRange: { min: "-10000000000", max: "0", type: "1" },
     numRange: { min: "0", max: "10000000000", type: "2" },
     numRange: { min: "-10000000000", max: "10000000000", type: "3" },
 * scopeRow:当前table行的数据
 */
  name: "Input",
  components: {},
  props: {
    inputComfig: {
      type: Object,
      default() {
        return {
          startAmt: "",
          endAmt: "",
        };
      },
    },
    numRange: {
      type: Object,
      default() {
        return {
          min: "0",
          max: "10000000000",
          type: "1",
        };
      },
    },
    scopeRow: {
      type: Object,
      default() {
        return {};
      },
    },
    placeholder: {
      type: String,
      default: "请输入",
    },
  },
  computed: {
    tip() {
      let res = "";
      if (this.numRange.type === "1") {
        res = "温馨提示：投资性-流入范围-100亿~0亿";
      } else if (this.numRange.type === "2") {
        res = "温馨提示：投资性-流入范围0亿~100亿";
      } else if (this.numRange.type === "3") {
        res = "温馨提示：投资性-流入范围-100亿~100亿";
      }
      return res;
    },
  },
  data() {
    return {
      StartVal: 1,
      endVal: 2,
    };
  },
  methods: {
    // 格式化 数值
    formatNum(val) {
      return (val = val
        .replace(/[^(\-)?\d^\.]+/g, "")
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".")
        .trim());
    },
    // 格式化 -
    formatStr(val, name) {
      this.inputComfig[name] =
        val.indexOf("-") == -1
          ? val
          : val[0] === "-"
          ? val[0] + val.replace(/-/g, "")
          : val.replace(/-/g, "");
    },
    // 经过限制后 只能输入 - 0-9等数字
    formatRes(val, name) {
      let number = "";
      val = this.formatNum(val);
      this.formatStr(val, name);
      // 当前输入的值 number
      number = val.indexOf(",") == -1 ? val : val.replace(/,/g, "");
      return number;
    },
    // 失去焦点时候 千分化
    formatQFH(val, name) {
      let number = val.indexOf(",") == -1 ? val : val.replace(/,/g, "");
      let myval = (number.length == 1 && number == "." ? 0 : number * 1)
        .toFixed(2)
        .replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
      // 过滤字符串(防止.2的合法 )
      this.inputComfig[name] = myval;
    },
    // 替换的处理函数
    replaceFun(val, name, min, max, tip) {
      // 拿到限制后的最后结果值
      let number = this.formatRes(val, name);
      if (Number(number) > Number(min) && Number(number) > 0) {
        // console.log("处理不带-的时候", number, "min", min, "max", max);
        if (Number(number) - Number(max) > 0) {
          //   console.log("大于最大值", number);
          this.inputComfig[name] = max + ".00";
          this.$message({
            message: tip,
            type: "warning",
          });
        }
      } else {
        // console.log("处理带-的时候", number);
        if (number[0] == "-") {
          // 输入值 大于 最小值时
          if (Math.abs(Number(number)) - Math.abs(Number(min)) > 0) {
            this.inputComfig[name] = min + ".00";
            this.$message({
              message: tip,
              type: "warning",
            });
          }
        }
      }
    },
    // input的修改
    startInput(val, min, max) {
      this.replaceFun(val, "startAmt", min, max, this.tip);
    },
    endInput(val, min, max) {
      this.replaceFun(val, "endAmt", min, max, this.tip);
    },
    // 失去焦点
    startBlur(val) {
      this.formatQFH(val, "startAmt");
      this.$emit("BlurGetScopeRow",this.scopeRow)
    },
    endBlur(val) {
      this.formatQFH(val, "endAmt");
      this.$emit("BlurGetScopeRow",this.scopeRow)
    },
    // 聚焦
    startFocus(val) {
      let number = val.indexOf(",") == -1 ? val : val.replace(/,/g, "");
      this.inputComfig.startAmt = number;
    },
    endFocus(val) {
      let number = val.indexOf(",") == -1 ? val : val.replace(/,/g, "");
      this.inputComfig.endAmt = number;
    },
  },
};
</script>
<style  lang="scss" scoped>
.input_wrap {
  display: flex;
  width: 100%;
  height: 32px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  .input,
  .interval {
    height: 30px;
    line-height: 30px;
  }
  ::v-deep .el-input__inner {
    border: none;
    font-size: 12px;
    font-weight: 700;
    padding: 0;
    margin: 0;
    text-align: center;
    height: 28px;
    line-height: 28px;
    width: 115px;
  }
}
</style>

使用组件

<!-- 现金流变动报表 -> 现金流补录 -->
<template>
  <con-dialog
    :dialogConfig="dialogConfig"
    :dialogWidth="dialogWidth"
    dialogMarginTop="5%"
    class="cash_supplementary"
  >
    <template slot="dialogContent">
      <div class="header">
      <div class="table">
        <list-tabel :data="tableData" :isStripe="false" :isLoading="isLoading">
          <template slot="amt" slot-scope="scopeVal">
            <x-input
              :inputComfig="scopeVal.scope.row"
              :numRange="numRange"
              :scopeRow="scopeVal.scope.row"
              @BlurGetScopeRow="BlurGetScopeRow"
            ></x-input>
          </template>
        </list-tabel>
      </div>
    </template>
  </con-dialog>
</template>

<script>
import conDialog from "@/components/commom/dialog/dialog.vue";
import InputShow from "./childCom/InputShow.vue";
import listTabel from "@/components/commom/conTable/listTable";
import XInput from "./childCom/Input.vue";
import { SelectOptionDataBI } from "@/api/settlementManagement/settlementMangement";
export default {
  name: "CashSupplementary",
  components: {
    conDialog,
    InputShow,
    listTabel,
    XInput,
  },
  props: {
    dialogConfig: {
      type: Object,
    },
    defaultParams: {
      type: Object,
    },
  },

  data() {
    return {
      isLoading: false,
      dialogWidth: "1000px",
      inputConfig: {
        date: {
          title: "日期：",
          labelWidth: "95px",
        },
        type: {
          title: "现金流类型：",
          labelWidth: "95px",
        },
        plate: {
          title: "板块：",
          labelWidth: "95px",
        },
        industry: {
          title: "产业：",
          labelWidth: "95px",
        },
      },
      inputParams: {
        date: "0",
        type: "1",
        plate: "2",
        industry: "3",
      },
      tableData: {
        tableCol: [
          {
            label: "事业部",
            prop: "divisionName",
            showOverFlowTooltip: true,
          },
          {
            label: "业务单元",
            prop: "yw",
            showOverFlowTooltip: true,
          },
          {
            label: "币种",
            prop: "curcd",
            width: "200",
            slot: true,
          },
          {
            label: "金额",
            prop: "amt",
            slot: true,
            // width: "280",
            width: "380",
            showOverFlowTooltip: false,
          },
          {
            label: "折币金额",
            prop: "amt2",
            slot: true,
            width: "160",
            showOverFlowTooltip: true,
          },
          {
            label: "备注",
            prop: "remarks",
            slot: true,
            width: "120",
            showOverFlowTooltip: true,
          },
        ],
        tableData: [
          {
            divisionName: "001",
            yw: "001",
            curcd: "",
            startAmt: "",
            endAmt: "",
            amtamt: "",
            amt2: "11",
            remarks: "",
          },
          {
            divisionName: "0002",
            yw: "0002",
            curcd: "",
            startAmt: "",
            endAmt: "",
            amtamt: "",
            amt2: "22",
            remarks: "",
          },
        ],
      },
      CurrencyConfig: {
        title: "",
        options: [],
      },
      CurrencyAll: [],
      // numRange: { min: "-10000000000", max: "0", type: "1" },
      // numRange: { min: "0", max: "10000000000", type: "2" },
      numRange: { min: "-10000000000", max: "10000000000", type: "3" },
    };
  },
  created() {
    this.init();
  },
  methods: {
    // table 之中的金币 获取行数据
    currencyChange(arr, scope) {
      console.log("arr", arr, scope);
      scope.curcd = arr.join(",");
    },
    // table之中的金额 获取行数据
    BlurGetScopeRow(scope) {
      console.log(" BlurGetScopeRow scope", scope);
    },
  },
};
</script>