uni-app的uni-number-box组件 怎么设置支持小数

第一次使用官方的uni-numbox,把step设置成小数点,才可以输入小数点。 嗯~~。还是饿了么ElInputNumber组件好用。copy改造了下添加precision控制,小数点就ok了。

template、style不变。其他更多功能去饿了么添加

	export default {
		name: "UniNumberBox",
		emits: ['change', 'input', 'update:modelValue', 'blur', 'focus'],
		props: {
			value: {
				type: [Number, String],
				default: 1
			},
			modelValue: {
				type: [Number, String],
				default: 1
			},
			min: {
				type: Number,
				default: 0
			},
			max: {
				type: Number,
				default: 100
			},
			step: {
				type: Number,
				default: 1
			},
			background: {
				type: String,
				default: '#f5f5f5'
			},
			color: {
				type: String,
				default: '#333'
			},
			disabled: {
				type: Boolean,
				default: false
			},
			// 精度
			precision: {
				type: Number,
				default: 4,
				validator(val) {
				  return val >= 0 && val === parseInt(val, 10);
				}
			}
		},
		data() {
			return {
				inputValue: 0
			};
		},
		watch: {
			value(val) {
				this.inputValue = +val;
			},
			modelValue(val) {
				this.inputValue = +val;
			}
		},
		computed:{
			 numPrecision() {
				const { value, step, getPrecision, precision } = this;
				const stepPrecision = getPrecision(step);
				if (precision !== undefined) {
				  if (stepPrecision > precision) {
					  // 精度不应小于步长的小数点  
					console.warn('[Element Warn][InputNumber]precision should not be less than the decimal places of step');
				  }
				  return precision;
				} else {
				  return Math.max(getPrecision(value), stepPrecision);
				}
			},
		},
		created() {
			if (this.value === 1) {
				this.inputValue = +this.modelValue;
			}
			if (this.modelValue === 1) {
				this.inputValue = +this.value;
			}
		},
		methods: {
			getPrecision(value) {
				if (value === undefined) return 0;
				const valueString = value.toString();
				const dotPosition = valueString.indexOf('.');
				let precision = 0;
				if (dotPosition !== -1) {
				  precision = valueString.length - dotPosition - 1;
				}
				return precision;
			},
			toPrecision(num, precision) {
				if (precision === undefined) precision = this.numPrecision;
				return parseFloat(Math.round(num * Math.pow(10, precision)) / Math.pow(10, precision));
			},
			_increase(val, step) {
				if (typeof val !== 'number' && val !== undefined) return this.currentValue;
				const precisionFactor = Math.pow(10, this.numPrecision);
				// Solve the accuracy problem of JS decimal calculation by converting the value to integer.
				return this.toPrecision((precisionFactor * val + precisionFactor * step) / precisionFactor);
			},
			_decrease(val, step) {
				if (typeof val !== 'number' && val !== undefined) return this.inputValue;
				const precisionFactor = Math.pow(10, this.numPrecision);
				return this.toPrecision((precisionFactor * val - precisionFactor * step) / precisionFactor);
			 },
			 setCurrentValue(newVal) {
				const oldVal = this.value;
				if (typeof newVal === 'number' && this.precision !== undefined) {
				  newVal = this.toPrecision(newVal, this.precision);
				}
				if (newVal >= this.max) newVal = this.max;
				if (newVal <= this.min) newVal = this.min;
				if (oldVal === newVal) return this.value;
				
				this.$emit("change", newVal);
				// TODO vue2 兼容
				this.$emit("input", newVal);
				// TODO vue3 兼容
				this.$emit("update:modelValue", newVal);
				this.inputValue = newVal;
			},
			_calcValue(type) {
				if (this.disabled) {
					return;
				}
				if (type === "minus") {
					this.decrease()
				}

				if (type === "plus") {
					this.increase()
				}
			},
			increase() {
				// if (this.inputNumberDisabled || this.maxDisabled) return;
				const value = this.value || 0;
				const newVal = this._increase(value, this.step);
				this.setCurrentValue(newVal);
			},
			decrease() {
				// if (this.inputNumberDisabled || this.minDisabled) return;
				const value = this.value || 0;
				const newVal = this._decrease(value, this.step);
				this.setCurrentValue(newVal);
			},
			_onBlur(event) {
				this.$emit('blur', event)
				let value = event.detail.value;
				if (!value) {
					// this.inputValue = 0;
					return;
				}
				this.inputValue = this.setCurrentValue(this.toPrecision(value, this.precision));
			},
			_onFocus(event) {
				this.$emit('focus', event)
			}
		}
	};
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值