order-ui-pc/src/components/globalComponents/digital-input/main.vue

<template>
  <div class="digitalInput">
    <el-input-number
      v-model="num"
      :name="name"
      class="fl"
      :class="{ appendInput: append }"
      @change="handleChange"
      @blur="handleChange"
      :precision="precision"
      :step="step"
      :min="min"
      :max="max"
      :disabled="disabled"
      :size="size || 'medium'"
      :placeholder="placeholder"
      :controls-position="position"
    />
    <!-- step-strictly -->
    <div
      class="my-append fl"
      :class="{
        'my-append-mini': size === 'mini',
        'my-append-small': size === 'small',
      }"
      v-if="append"
    >
      {{ append }}
    </div>
  </div>
</template>

<script>
export default {
  name: "digitalInput",
  props: [
    "values",
    "min",
    "max",
    "step",
    "precision",
    "size",
    "append",
    "name",
    "disabled",
    "controls",
    "newTime",
    "placeholder",
    "position",
  ],
  watch: {
    values: function (val) {
      // console.log(this.name + "=" + val);
      this.num = val;
    },
    newTime: function (val) {
      // console.log(this.name + "=" + this.values);
      this.num = this.values;
      this.$emit("reschange", this.num);
    },
    min: function (val) {
      let a = this.accMul(val, "1");
      let b = this.accMul(this.num, "1");
      console.log(a, b);
      if (a >= b) {
        this.num = a + "";
        this.$emit("reschange", this.num);
      }
    },
    max: function (val) {
      let a = this.accMul(val, "1");
      let b = this.accMul(this.num, "1");
      console.log(a, b);
      if (a <= b) {
        this.num = a + "";
        this.$emit("reschange", this.num);
      }
    },
  },
  data() {
    return {
      num: 0,
      loading: false,
    };
  },
  methods: {
    handleChange(value) {
      this.$emit("reschange", this.num);
      // console.log(value);
    },
    accMul(arg1, arg2) {
      var m = 0,
        s1 = arg1.toString(),
        s2 = arg2.toString();
      try {
        m += s1.split(".")[1].length;
      } catch (e) {}
      try {
        m += s2.split(".")[1].length;
      } catch (e) {}
      return (
        (Number(s1.replace(".", "")) * Number(s2.replace(".", ""))) /
        Math.pow(10, m)
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.digitalInput {
  width: 100%;
  /deep/ .el-input-number.is-controls-right .el-input__inner {
    padding-right: 15px !important;
    text-align: left !important;
  }
  /deep/.el-input-number.is-controls-right .el-input-number__decrease {
    display: none !important;
  }
  /deep/.el-input-number.is-controls-right .el-input-number__increase {
    display: none !important;
  }
  /deep/.el-input-number {
    width: 100% !important;
    &.appendInput {
      width: calc(100% - 40px) !important;
      .el-input__inner {
        border-top-right-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
      }
    }
  }
  .my-append {
    width: 40px;
    height: 40px;
    line-height: 40px;
    box-sizing: border-box;
    text-align: center;
    background-color: #f5f7fa;
    color: #909399;
    position: relative;
    border: 1px solid #dcdfe6;
    border-left: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    &.my-append-small {
      height: 32px !important;
      line-height: 32px !important;
    }
    &.my-append-mini {
      height: 28px !important;
      line-height: 28px !important;
    }
  }
}
</style>