JS：验证、限制纯数字或者英尺英寸格式的值

简介

书写格式有如下情况：
1.纯数字
2.英尺：10’
3.英尺英寸： 10’8"
4.英寸：8"
5.分数：4/5"
6.英寸 分数：8 4/5"（注意8后面有个空格的）
7.英尺 分数： 10’4/5"
8.英尺 英寸 分数： 10’8 4/5"（注意8后面有个空格的）
9.英尺 英寸 分数： 10’8 4/5"-------注意英寸及分数都存在时有空格
10.带有小数的格式: 4.5’,4.5’3.5",3.5",4.5’1 1/3",4.5’1",4.5’1.5"

// 输入结果验证是否符合规则要求，不大推荐，不过易懂一些（没有小数情况、不支持中文单双引号）
rulesOne: /(^[\d]$|^[\d]+[\d]$)|(^[\d]+\'$)|(^[\d]+\'+[\d]+\"$)|(^[\d]+\"$)|(^[\d]+\/+[\d]+\"$)|(^[\d]+\s+[\d]+\/+[\d]+\"$)|(^[\d]+\'+[\d]+\/+[\d]+\"$)|(^[\d]+\'+[\d]+\s+[\d]+\/+[\d]+\"$)/

// 输入结果验证是否符合规则要求，推荐使用这个（中英文的单引号、双引号都支持）
rulesTwo: /^(((([1-9]\d*)([ ]+|\x2d+))?([1-9]\d*)(\/)([1-9]\d*))|(([1-9]\d*\.?\d*)|([0]\.\d*)))((\x27(((([1-9]\d*)([ ]+|\x2d+))?([1-9]\d*)(\/)([1-9]\d*))|(([1-9]\d*\.?\d*)|([0]\.\d*)))(\x22))|(\x27|\x22))|(([1-9]\d*\.?\d*)|([0]\.\d*))/g

具体实现

1.输入框组件（inchesInput.vue）

<template>
  <div
    class="inches-input-box"
    :style="styleData"
    :class="{ 'inches-input-disabled': isDisabled || valDisable }"
  >
    <input
      v-model="inputShowValue"
      ref="unitInputRef"
      class="unitInput"
      :class="{ 'input-error': !isOK, 'input-slot': isHaveNumberBtn }"
      autocomplete="off"
      :disabled="isDisabled || valDisable"
      @focus="focusInputToSelectAll"
      @input="inputEvent"
      @compositionstart="inputStart"
      @compositionend="inputEnd"
      @change="changeValueFun"
    />
    <div
      v-if="isHaveNumberBtn"
      slot="suffix"
      :class="{
        'slot-icon-div': true,
        'slot-icon-editable': !isDisabled && !valDisable,
      }"
    >
      <i class="iconfont icon-shangla" @click.stop="handleValueUp" />
      <i class="iconfont icon-xiala" @click.stop="handleValueDown" />
    </div>
  </div>
</template>

<script>
import { TzLengthSetting, TzLengthUnit } from './inchesExchange';
export default {
  props: {
    // 输入框是否可清空，默认为不可清空
    clearable: {
      type: Boolean,
      default() {
        return false;
      },
    },
    // 输入框是否禁用
    isDisabled: {
      type: Boolean,
      default() {
        return false;
      },
    },
    // 传入的单位值（毫米、英寸英尺）
    inchesVal: [String, Number],
    // 没有英尺部分（英尺转换为英寸，再返回值）
    isNoneFeet: {
      type: Boolean,
      default() {
        return false;
      },
    },
    // 传入最大值（mm，Number）
    mmMax: {
      type: Number,
      required: false,
    },
    // 传入最小值（mm，Number）
    mmMin: {
      type: Number,
      required: false,
    },
    // 传入的样式，部分生效（不针对el_inner之类的属性）
    styleData: {
      type: Object,
      default() {
        return {};
      },
    },
    // 长度单位，默认毫米
    lengthUnit: {
      type: Number,
      default: 2,
    },
    // 是否四舍五入英寸的分数部分
    isMathRoundGrade: {
      type: Boolean,
      default: false,
    },
    // 英制分数的最大分母
    lengthDenominator: {
      type: Number,
      default: 64,
    },
    // 是否有改值回调（有就不需要超值提示）
    isHaveValueChangeCallback: {
      default: false,
    },
    // 是否有加减值快捷按钮
    isHaveNumberBtn: {
      type: Boolean,
      default: true,
    },
    // 加减的单次值
    plusAndMminusValue: {
      type: Number,
      default: 0,
    },
  },
  components: {},
  data() {
    return {
      mmValue: '', // 毫米为单位的值
      feetInchesValue: '', // 英尺英寸单位的值
      onlyInchesValue: '', // 英寸单位的值
      inputShowValue: '', // input显示的值
      isOnComposed: false, // 是否输入组成中
      isOK: true, // 输入内容格式是否正确
      messages: {
        message: '',
        code: '',
        data: {
          inchesVal: '',
          mmVal: '',
        },
      }, // 改值后返回的信息
      lastValInfo: {}, // 上一次输入值的有效结果
      valDisable: false, // 是否可更改值
      plusAndMminusValueDefault: 50.8, // 默认两英寸，一英寸（1"） = 25.4毫米（mm）
    };
  },
  mounted() {
    if (
      this.mmMax !== undefined &&
      this.mmMax !== null &&
      !isNaN(this.mmMax) &&
      (this.mmMax === 0 || this.mmMax === '0')
    ) {
      this.valDisable = true;
    }
    if (
      this.mmMin !== undefined &&
      this.mmMin !== null &&
      !isNaN(this.mmMin) &&
      (this.mmMin === 0 || this.mmMin === '0')
    ) {
      this.valDisable = true;
    }
    this.initValFun(this.inchesVal);
  },
  beforeDestroy() {},
  computed: {},
  watch: {
    // 传入值变化时，重新转换显示
    inchesVal(val) {
      let that = this;
      that.initValFun(val);
    },
    // 长度单位切换后，需要切换展示的值的格式
    lengthUnit(val) {
      let that = this;
      that.exchangeShowValFun(that, val);
    },
  },
  methods: {
    // #region 操作
    // 操作：选中input框，自动全选
    focusInputToSelectAll() {
      this.$refs.unitInputRef.select();
      this.$emit('focus');
    },
    changeInputValue(val) {
      this.initValFun(val);
    },
    // 初始化传入的值
    initValFun(val) {
      this.mmValue = val;
      this.feetInchesValue = val;
      this.onlyInchesValue = val;
      this.inputShowValue = val;
      if (val && val !== '0') {
        if (Number(val)) {
          // 纯数字 => 英尺英寸单位、英寸单位
          // if ((this.mmMax !== undefined && this.mmMax !== null && !isNaN(this.mmMax)) && this.mmValue > this.mmMax) this.mmValue = this.mmMax
          // if ((this.mmMin !== undefined && this.mmMin !== null && !isNaN(this.mmMin)) && this.mmValue < this.mmMin) this.mmValue = this.mmMin
          this.feetInchesValue = TzLengthSetting.milliMeterToInchesFun(
            this.mmValue,
            false,
            this.isMathRoundGrade ? 1 : this.lengthDenominator
          );
          this.onlyInchesValue = TzLengthSetting.milliMeterToInchesFun(
            this.mmValue,
            true,
            this.isMathRoundGrade ? 1 : this.lengthDenominator
          );
          this.exchangeShowValFun(this, this.lengthUnit);
        } else {
          // 非纯数字 => 毫米单位 => 英尺英寸
          this.mmValue = TzLengthSetting.inchesToMilliMeter(val);
          // if ((this.mmMax !== undefined && this.mmMax !== null && !isNaN(this.mmMax)) && this.mmValue > this.mmMax) this.mmValue = this.mmMax
          // if ((this.mmMin !== undefined && this.mmMin !== null && !isNaN(this.mmMin)) && this.mmValue < this.mmMin) this.mmValue = this.mmMin
          this.feetInchesValue = TzLengthSetting.milliMeterToInchesFun(
            this.mmValue,
            false,
            this.isMathRoundGrade ? 1 : this.lengthDenominator
          );
          this.onlyInchesValue = TzLengthSetting.milliMeterToInchesFun(
            this.mmValue,
            true,
            this.isMathRoundGrade ? 1 : this.lengthDenominator
          );
          this.exchangeShowValFun(this, this.lengthUnit);
        }
      }
      // 存储传入的值
      this.lastValInfo = {
        mmValue: this.mmValue,
        feetInchesValue: this.feetInchesValue,
        onlyInchesValue: this.onlyInchesValue,
        inputShowValue: this.inputShowValue,
      };
    },
    // 方法：切换输入框显示的值
    exchangeShowValFun(that, value) {
      switch (value) {
        case TzLengthUnit.MM:
          // that.inputShowValue = Math.round(that.mmValue * 100) / 100
          that.inputShowValue = Math.round(that.mmValue * 10) / 10;
          break;
        case TzLengthUnit.FEET_INCHES:
          that.inputShowValue = that.feetInchesValue;
          break;
        case TzLengthUnit.INCHES:
          that.inputShowValue = that.onlyInchesValue;
          break;
        default:
          // that.inputShowValue = Math.round(that.mmValue * 100) / 100
          that.inputShowValue = Math.round(that.mmValue * 10) / 10;
          break;
      }
      // console.log('单位切换', value, that.inputShowValue, { feetInchesValue: that.feetInchesValue, onlyInchesValue: that.onlyInchesValue, mmValue: that.mmValue })
    },
    // 输入框的单个输入事件 [中文是多次输入，结果一个]
    // input事件：输入框值变化时
    inputEvent() {
      if (this.isOnComposed) {
        return;
      }
      if (this.inputShowValue === 0 || this.inputShowValue === '0') {
        this.isOK = true;
      } else {
        this.inputShowValue = TzLengthSetting.adjustInchesInput(
          this.inputShowValue
        );
        if (this.inputShowValue === '') {
          this.isOK = true;
        } else {
          this.isOK = TzLengthSetting.reg.test(this.inputShowValue);
        }
      }
    },
    // 中文拼音：开始输入
    inputStart() {
      this.isOnComposed = true;
    },
    // 中文拼音：输入完毕
    inputEnd() {
      this.isOnComposed = false;
    },
    // 输入框值改变后，修改状态为false
    changeValueFun() {
      if (this.inputShowValue === '') {
        this.inputShowValue = this.lastValInfo.inputShowValue;
        this.mmValue = this.lastValInfo.mmValue;
        this.feetInchesValue = this.lastValInfo.feetInchesValue;
        this.onlyInchesValue = this.lastValInfo.onlyInchesValue;
        return;
      }
      if (this.inputShowValue === 0 || this.inputShowValue === '0') {
        this.mmValue = 0;
        this.feetInchesValue = '0';
        this.onlyInchesValue = '0';
        this.lastValInfo = {
          mmValue: this.mmValue,
          feetInchesValue: this.feetInchesValue,
          onlyInchesValue: this.onlyInchesValue,
          inputShowValue: this.inputShowValue,
        };
        this.messages = {
          // message: this.$t('message.conversionSucceeded'),
          code: 1,
          data: {
            inchesVal: this.feetInchesValue,
            mmVal: this.mmValue,
          },
        };
        this.$emit('returnInchesVal', this.messages);
        return;
      }
      this.isOK = TzLengthSetting.reg.test(this.inputShowValue);
      this.inputShowValue = TzLengthSetting.formatValue(this.inputShowValue);
      if (!this.isOK) {
        this.mmValue = '';
        this.feetInchesValue = '';
        this.onlyInchesValue = '';
        this.messages = {
          // message: this.$t('message.inputFormatError'),
          code: 0,
          data: {
            inchesVal: this.feetInchesValue,
            mmVal: this.mmValue,
          },
        };
        this.$emit('returnInchesVal', this.messages);
        return;
      }
      // 不是纯数字（及不包含浮点数）的就转换为毫米单位，并返回
      if (!Number(this.inputShowValue)) {
        this.feetInchesValue = this.inputShowValue;
        this.mmValue = TzLengthSetting.inchesToMilliMeter(this.feetInchesValue);
        if (
          this.mmMax !== undefined &&
          this.mmMax !== null &&
          !isNaN(this.mmMax) &&
          this.mmValue > this.mmMax
        ) {
          this.mmValue = this.mmMax;
          if (!this.isHaveValueChangeCallback) {
            this.overValueAreaFun(); // 超过最大最小值时的消息回调
          }
        }
        if (
          this.mmMin !== undefined &&
          this.mmMin !== null &&
          !isNaN(this.mmMin) &&
          this.mmValue < this.mmMin
        ) {
          this.mmValue = this.mmMin;
          if (!this.isHaveValueChangeCallback) {
            this.overValueAreaFun(); // 超过最大最小值时的消息回调
          }
        }
        this.feetInchesValue = TzLengthSetting.milliMeterToInchesFun(
          this.mmValue,
          false,
          this.isMathRoundGrade ? 1 : this.lengthDenominator
        ); // 再毫米转英尺英寸
        this.onlyInchesValue = TzLengthSetting.milliMeterToInchesFun(
          this.mmValue,
          true,
          this.isMathRoundGrade ? 1 : this.lengthDenominator
        ); // 再毫米转英寸
        this.exchangeShowValFun(this, this.lengthUnit);
        this.lastValInfo = {
          mmValue: this.mmValue,
          feetInchesValue: this.feetInchesValue,
          onlyInchesValue: this.onlyInchesValue,
          inputShowValue: this.inputShowValue,
        };
        this.messages = {
          code:
            this.feetInchesValue &&
            (Number(this.mmValue) || parseFloat(this.mmValue))
              ? 1
              : 0,
          // message:
          //   this.feetInchesValue &&
          //   (Number(this.mmValue) || parseFloat(this.mmValue))
          //     ? this.$t('message.conversionSucceeded')
          //     : this.$t('message.conversionFailed'),
          data: {
            inchesVal: this.feetInchesValue,
            mmVal: Number(this.mmValue) || parseFloat(this.mmValue),
          },
        };
        this.$emit('returnInchesVal', this.messages);
        return;
      }
      // 是毫米，就转换为英尺英寸
      this.mmValue = this.inputShowValue;
      if (
        this.mmMax !== undefined &&
        this.mmMax !== null &&
        !isNaN(this.mmMax) &&
        this.mmValue > this.mmMax
      ) {
        this.mmValue = this.mmMax;
        if (!this.isHaveValueChangeCallback) {
          this.overValueAreaFun(); // 超过最大最小值时的消息回调
        }
      }
      if (
        this.mmMin !== undefined &&
        this.mmMin !== null &&
        !isNaN(this.mmMin) &&
        this.mmValue < this.mmMin
      ) {
        this.mmValue = this.mmMin;
        if (!this.isHaveValueChangeCallback) {
          this.overValueAreaFun(); // 超过最大最小值时的消息回调
        }
      }
      this.feetInchesValue = TzLengthSetting.milliMeterToInchesFun(
        this.mmValue,
        true,
        this.isMathRoundGrade ? 1 : this.lengthDenominator
      ); // 再毫米转英尺英寸
      this.onlyInchesValue = TzLengthSetting.milliMeterToInchesFun(
        this.mmValue,
        false,
        this.isMathRoundGrade ? 1 : this.lengthDenominator
      ); // 再毫米转英寸
      this.exchangeShowValFun(this, this.lengthUnit);
      this.lastValInfo = {
        mmValue: this.mmValue,
        feetInchesValue: this.feetInchesValue,
        onlyInchesValue: this.onlyInchesValue,
        inputShowValue: this.inputShowValue,
      };
      this.messages = {
        // message: this.$t('message.conversionSucceeded'),
        code: 1,
        data: {
          inchesVal: this.feetInchesValue,
          mmVal: Number(this.mmValue),
        },
      };
      this.$emit('returnInchesVal', this.messages);
    },
    // 超过最大最小值时的消息回调
    overValueAreaFun() {
      this.$emit('verifyFailed', { mmMin: this.mmMin, mmMax: this.mmMax });
    },
    // 操作：增加值
    handleValueUp() {
      if (this.isDisabled || this.valDisable) {
        return;
      }
      let mm =
        Number(this.mmValue) +
        (this.plusAndMminusValue
          ? this.plusAndMminusValue
          : this.plusAndMminusValueDefault);
      if (
        this.mmMax !== undefined &&
        this.mmMax !== null &&
        !isNaN(this.mmMax) &&
        mm > this.mmMax
      ) {
        mm = this.mmMax;
      }
      // 与上一次的毫米值的相等，则退出
      if (
        (this.lastValInfo.mmValue || Number(this.lastValInfo.mmValue) === 0) &&
        mm === Number(this.lastValInfo.mmValue)
      ) {
        return;
      }
      this.mmValue = mm;
      this.updateValue(); // 加减的赋值更新
    },
    // 操作：减少值
    handleValueDown() {
      if (this.isDisabled || this.valDisable) {
        return;
      }
      let mm =
        Number(this.mmValue) -
        (this.plusAndMminusValue
          ? this.plusAndMminusValue
          : this.plusAndMminusValueDefault);
      if (mm < 0) {
        return;
      }
      if (
        this.mmMin !== undefined &&
        this.mmMin !== null &&
        !isNaN(this.mmMin) &&
        mm < this.mmMin
      ) {
        mm = this.mmMin;
      }
      // 与上一次的毫米值的相等，则退出
      if (
        (this.lastValInfo.mmValue || Number(this.lastValInfo.mmValue) === 0) &&
        mm === Number(this.lastValInfo.mmValue)
      ) {
        return;
      }
      this.mmValue = mm;
      this.updateValue(); // 加减的赋值更新
    },
    // 加减的赋值更新
    updateValue() {
      this.feetInchesValue = TzLengthSetting.milliMeterToInchesFun(
        this.mmValue,
        false,
        this.isMathRoundGrade ? 1 : this.lengthDenominator
      );
      this.onlyInchesValue = TzLengthSetting.milliMeterToInchesFun(
        this.mmValue,
        true,
        this.isMathRoundGrade ? 1 : this.lengthDenominator
      );
      this.exchangeShowValFun(this, this.lengthUnit);
      this.lastValInfo = {
        mmValue: this.mmValue,
        feetInchesValue: this.feetInchesValue,
        onlyInchesValue: this.onlyInchesValue,
        inputShowValue: this.inputShowValue,
      };
      this.messages = {
        code:
          this.feetInchesValue &&
          (Number(this.mmValue) || parseFloat(this.mmValue))
            ? 1
            : 0,
        // message:
        //   this.feetInchesValue &&
        //   (Number(this.mmValue) || parseFloat(this.mmValue))
        //     ? this.$t('message.conversionSucceeded')
        //     : this.$t('message.conversionFailed'),
        data: {
          inchesVal: this.feetInchesValue,
          mmVal: Number(this.mmValue) || parseFloat(this.mmValue),
        },
      };
      this.$emit('returnInchesVal', this.messages);
    },
    // #endregion
  },
};
</script>

<style lang="less"></style>

<style lang="less" scoped>
@height: 32px;
.inches-input-box {
  width: 124px;
  height: @height;
  position: relative;
  input {
    width: 100%;
    height: @height;
    line-height: @height;
    border-radius: 4px;
    padding: 0 5px;
    -webkit-appearance: none;
    background-image: none;
    border: 1px solid #dcdfe6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    outline: none;
    -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    overflow: visible;
  }
  input:focus {
    border-color: #fdb906;
  }
  .input-error {
    border-color: red;
  }
  .input-slot {
    padding-right: 20px;
  }
  .slot-icon-div {
    width: 15px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    right: 5px;
    top: 0;
    bottom: 0;
    i {
      cursor: pointer;
      font-size: 14px;
      color: #c0c4cc;
      &:hover {
        color: #fdb906;
      }
    }
  }
  .slot-icon-editable {
    i {
      cursor: pointer;
      &:hover {
        color: #fdb906;
      }
    }
  }
}
.inches-input-normal {
  &:hover {
    input {
      border-color: #fdb906;
    }
  }
}
.inches-input-disabled {
  input {
    cursor: not-allowed;
    background-color: #f5f7fa;
  }
}
</style>

2.抽离方法附录（inchesExchange.js）

const TzLengthUnit = {
  MM: 0, // 毫米
  FEET_INCHES: 1, // 英尺英寸
  INCHES: 2, // 英寸
};

const TzInchesFormat = {
  FRACTIONAL: 0, // 分数
  DECIMAL: 1, // 小数
};

class TzLengthSetting {
  constructor() {}

  static get reg() {
    return /^(((([1-9]\d*)([ ]+|\x2d+))?([1-9]\d*)(\/)([1-9]\d*))|(([1-9]\d*\.?\d*)|([0]\.\d*)))((\x27(((([1-9]\d*)([ ]+|\x2d+))?([1-9]\d*)(\/)([1-9]\d*))|(([1-9]\d*\.?\d*)|([0]\.\d*)))(\x22))|(\x27|\x22))|(([1-9]\d*\.?\d*)|([0]\.\d*))/g;
  }

  // 正则限制输入的只有纯数字或英尺英寸
  static adjustInchesInput(value) {
    let _value = value + '';
    let patt = /[ 0-9\x2e\x2f\x27\x22\x2d‘’“”]*/g;
    let z = patt.exec(_value);
    let inches = '';
    if (z != null) {
      inches = z[0];
      inches = inches
        .replace('‘', "'")
        .replace('’', "'")
        .replace('“', '"')
        .replace('”', '"');
    }
    return inches;
  }

  // 格式化输入的值
  static formatValue(value) {
    let z = this.reg.exec(value);
    let inches = '';
    if (z != null) {
      inches = z[0];
    }
    return inches;
  }

  // 毫米转英制（参数：值, 是否不需要英尺部分, 分母[为1则分数部分四舍五入], 分数/小数, 小数保留位）
  static milliMeterToInchesFun(
    value,
    isNoneFeet = false,
    inchesPrecision = 64,
    inchesFormat = TzInchesFormat.FRACTIONAL,
    inchesDigit = 2
  ) {
    if (
      !/^[\d]+[\d]$/.test(value) &&
      !/^[\d]$/.test(value) &&
      !parseFloat(value) > 0
    ) {
      return '';
    }
    let inchesNumAll = ((value * 100) / 25.4 / 100).toFixed(2); // 1.计算所有的英寸及小数，避免JS计算的转换进制计算的误差，只取到小数两位
    let feetNum = parseInt(inchesNumAll / 12); // 2.计算英尺整数
    let inchesIntAll = parseInt(inchesNumAll); // 计算英寸整数
    let inchesNumInt = parseInt(inchesNumAll - feetNum * 12); // 3.计算剩余的英寸整数
    function formatFloat(decimals) {
      let formatDecimals = decimals.toFixed(2) * inchesPrecision;
      if (formatDecimals > 0 && formatDecimals < `${1 / inchesPrecision}`) {
        return `${1}/${inchesPrecision}`;
      }
      let numeratorInt = Math.round(formatDecimals);
      if (!numeratorInt) {
        return '';
      }
      if (numeratorInt === inchesPrecision) {
        return 1;
      }
      // 对分子分母进行约分
      let m = numeratorInt;
      let n = inchesPrecision;
      let a = m;
      let b = n;
      if (a >= b) {
        a = m;
        b = n;
      } else {
        a = n;
        b = m;
      }
      if (m !== 1 && n !== 1) {
        for (let i = b; i >= 2; i--) {
          if (m % i === 0 && n % i === 0) {
            m = m / i;
            n = n / i;
          }
        }
      }
      return `${m}/${n}`;
    }
    let inchesNumFloat = '';
    if (inchesFormat === TzInchesFormat.FRACTIONAL) {
      // 分数
      // 4.计算剩余的英寸小数，并转为分数（最大分母为32）
      inchesNumFloat = formatFloat(inchesNumAll - feetNum * 12 - inchesNumInt);
    } else if (inchesFormat === TzInchesFormat.DECIMAL) {
      // 小数
      inchesNumFloat = (inchesNumAll - feetNum * 12 - inchesNumInt).toFixed(
        inchesDigit
      );
    }
    let allIn = '';
    if (isNoneFeet) {
      // 限制只要英寸格式的值
      if (inchesPrecision === 1) {
        // 是否作分数的四舍五入
        inchesNumFloat =
          inchesNumAll - feetNum * 12 - inchesNumInt >= 0.5 ? 1 : '';
      }
      if (inchesNumFloat === 1) {
        inchesNumFloat = '';
        inchesIntAll = inchesIntAll + 1 || 1;
      }
      if (inchesNumFloat) {
        allIn = inchesNumFloat + '"';
        if (inchesIntAll) {
          allIn = inchesIntAll + ' ' + allIn;
        }
      } else if (inchesIntAll) {
        allIn = inchesIntAll + '"';
      }
    } else {
      // 未限制只要英寸格式的值
      if (inchesPrecision === 1) {
        // 是否作分数的四舍五入
        inchesNumFloat =
          inchesNumAll - feetNum * 12 - inchesNumInt >= 0.5 ? 1 : '';
      }
      if (inchesNumFloat === 1) {
        inchesNumFloat = '';
        if (inchesNumInt === 11) {
          inchesNumInt = '';
          feetNum = feetNum + 1;
        } else {
          inchesNumInt = inchesNumInt + 1 || 1;
        }
      }
      // 如果英尺小于3'，则转换为英寸
      if (feetNum && feetNum < 3) {
        inchesNumInt = inchesNumInt + feetNum * 12;
        feetNum = 0;
      }
      if (inchesNumFloat) {
        allIn = inchesNumFloat + '"';
        if (inchesNumInt) {
          allIn = inchesNumInt + ' ' + allIn;
          if (feetNum) {
            allIn = feetNum + "'" + allIn;
          }
        } else if (feetNum) {
          allIn = feetNum + "'" + allIn;
        }
      } else if (inchesNumInt) {
        allIn = inchesNumInt + '"';
        if (feetNum) {
          allIn = feetNum + "'" + allIn;
        }
      } else if (feetNum) {
        allIn = feetNum + "'";
      }
    }
    return allIn;
  }

  // 英制转毫米（参数：值，小数保留位）
  static inchesToMilliMeter(value, digit = 2) {
    value = this.formatValue(value);
    if (value === '0') {
      return 0;
    }
    if (!value || !this.reg.test(value)) {
      return '';
    }
    let feetNum = 0; // 英尺的整数部分
    let inchesNum = 0; // 英寸的整数部分
    let inchesNumScore = 0; // 英寸的小数部分
    let inchesNumScoreM = 0; // 英寸的小数部分的分母
    let inchesNumScoreZ = 0; // 英寸的小数部分的分子
    let mmNumAll = '';
    if (value.indexOf("'") > -1) {
      feetNum = value.substring(0, value.indexOf("'"));
      if (value.indexOf('"') > -1) {
        if (value.indexOf('/') > -1) {
          if (/\s/.test(value)) {
            inchesNum = value.substring(
              value.indexOf("'") + 1,
              value.indexOf(' ')
            );
            inchesNumScore = value.substring(
              value.indexOf(' ') + 1,
              value.indexOf('"')
            );
            inchesNumScoreZ = inchesNumScore.split('/')[0];
            inchesNumScoreM = inchesNumScore.split('/')[1];
          } else {
            inchesNumScore = value.substring(
              value.indexOf("'") + 1,
              value.indexOf('"')
            );
            inchesNumScoreZ = inchesNumScore.split('/')[0];
            inchesNumScoreM = inchesNumScore.split('/')[1];
          }
        } else {
          inchesNum = value.substring(
            value.indexOf("'") + 1,
            value.indexOf('"')
          );
        }
      }
    } else if (value.indexOf('"') > -1) {
      if (value.indexOf('/') > -1) {
        inchesNum = value.substring(0, value.indexOf(' '));
        inchesNumScore = value.substring(
          value.indexOf(' ') + 1,
          value.indexOf('"')
        );
        inchesNumScoreZ = inchesNumScore.split('/')[0];
        inchesNumScoreM = inchesNumScore.split('/')[1];
      } else {
        inchesNum = value.substring(0, value.indexOf('"'));
      }
    }
    if (feetNum) {
      mmNumAll = feetNum * 25.4 * 12;
      if (!isNaN(inchesNum)) {
        mmNumAll = mmNumAll + inchesNum * 25.4;
        if (inchesNumScoreZ && inchesNumScoreM) {
          mmNumAll = mmNumAll + (inchesNumScoreZ / inchesNumScoreM) * 25.4;
        }
      } else if (!isNaN(inchesNumScoreZ) && !isNaN(inchesNumScoreM)) {
        mmNumAll = mmNumAll + (inchesNumScoreZ / inchesNumScoreM) * 25.4;
      }
    } else if (!isNaN(inchesNum)) {
      mmNumAll = inchesNum * 25.4;
      if (inchesNumScoreZ && inchesNumScoreM) {
        mmNumAll = mmNumAll + (inchesNumScoreZ / inchesNumScoreM) * 25.4;
      }
    } else if (!isNaN(inchesNumScoreZ) && !isNaN(inchesNumScoreM)) {
      mmNumAll = (inchesNumScoreZ / inchesNumScoreM) * 25.4;
    }
    let digitPow = 1;
    if (digit) {
      digitPow = Math.pow(10, digit); // 取10的dright次方
    }
    return Math.round(mmNumAll * digitPow) / digitPow;
  }

  // 数据格式化为毫米
  static fixMilliMeter(value) {
    let _value = Number(value);
    if (!_value) {
      _value = this.inchesToMilliMeter(value);
    }
    return _value;
  }
}

export { TzLengthSetting, TzLengthUnit };

3.页面使用

<template>
  <div>
    <inchesInput :inchesVal="inchesInputVal" @returnInchesVal="returnInchesFun"/>
  </div>
</template>
<script>
import inchesInput from '@/components/inchesInput'
export default {
  components: {
    inchesInput
  },
  data () {
    return {
      inchesInputVal: ''
	}
  },
  methods: {
    returnInchesFun(obj) {
      console.log(obj) // 返回的结果，是一个对象
    }
  }
}
</script>

最后

觉得有用的朋友请用你的金手指点一下赞，或者评论留言一起探讨技术！