简介

书写格式有如下情况：
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><divclass="inches-input-box":style="styleData":class="{ 'inches-input-disabled': isDisabled || valDisable }"><inputv-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"/><divv-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.mmMinthis.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.mmMinthis.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) / 100that.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) / 100that.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;},// 输入框值改变后，修改状态为falsechangeValueFun() {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>

最后

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

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

常用的js验证代码_数字|电话号码|传真|邮箱|手机号码|邮编
常用的js验证数字,电话号码,传真,邮箱,手机号码,邮编 1.数字 function testisNum(object) { ...
快速使用js验证输入的数字类型
为什么80%的码农都做不了架构师?>>> function checkbuttonPressed(){ var layoutObj=document.getEleme ...
js将一串数字1607222406转换为日期格式
业务需求: 后台返回的时间是一串数字格式,我们需要把它转换为需要渲染的日期格式 : 2020/12/6 12:00:07 一,使用原生处理方式 1.原始的后台数据 const oldtime = 16 ...
js将一串数字1403149534转换为日期格式
需求 js中接收到后台返回的json字符串中的日期类型的字段都变成了一串数字,形如:1500341149000.所以我们需要将这个串格式化形如:2017-07-18 09:25:49. 直接上代码: ...
long到number转换 ts_js如何将纯数字字符串转换为long型
1.js如何将纯数字字符串转换为long型? js 中 int的存储位数?最大十进制数表示是多少? 整数(不使用小数点或指数计数法)最多为 15 位. 小数的最大位数是 17,但是浮点运算并不总是 1 ...
mysql中判断字段是否包含数字或者是否为纯数字
文章目录各种场景判断字段是否包含数字使用like模糊查询包含某个数字使用mysql原生函数FIND_IN_SET查询包含某个数字使用regexp正则匹配纯数字使用regexp正则匹配字段值 ...
js验证input输入框（字母，数字，符号，中文）
<h1>js验证输入框内容</h1> <br /> <br /> 只能输入英文 <input type="text" on ...
jquery纯数字验证
$(document).ready(function(){ //纯数字验证,只让输入数字,比如-号等都不然输入. $('#user-defined').unbind(); $('#user ...
[js] 写一个方法，实时验证input输入的值是否满足金额如：3.56(最多只有两位小数且只能数字和小数点)的格式，其它特殊字符禁止输入
[js] 写一个方法,实时验证input输入的值是否满足金额如:3.56(最多只有两位小数且只能数字和小数点)的格式,其它特殊字符禁止输入 <body><input type=&qu ...

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

简介

具体实现

最后

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

最新文章

热门文章