|
@ -1,14 +1,12 @@ |
|
|
<template> |
|
|
<template> |
|
|
<view class="uni-numbox"> |
|
|
<view class="uni-numbox"> |
|
|
<view @click="_calcValue('minus')" class="uni-numbox__minus uni-numbox-btns" :style="{background}"> |
|
|
<view @click="_calcValue('minus')" class="uni-numbox__minus uni-numbox-btns" :style="{background}"> |
|
|
<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }" |
|
|
<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }" :style="{color}">-</text> |
|
|
:style="{color}">-</text> |
|
|
|
|
|
</view> |
|
|
</view> |
|
|
<input :disabled="disabled" @focus="_onFocus" @blur="_onBlur" class="uni-numbox__value" type="number" |
|
|
<input :disabled="disabled" @focus="_onFocus" @blur="_onBlur" class="uni-numbox__value" type="number" |
|
|
:focus="focus" v-model="inputValue" :style="{background, color}" @input="checkNum" :maxlength="maxlength" /> |
|
|
v-model="inputValue" :style="{background, color}" /> |
|
|
<view @click="_calcValue('plus')" class="uni-numbox__plus uni-numbox-btns" :style="{background}"> |
|
|
<view @click="_calcValue('plus')" class="uni-numbox__plus uni-numbox-btns" :style="{background}"> |
|
|
<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }" |
|
|
<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }" :style="{color}">+</text> |
|
|
:style="{color}">+</text> |
|
|
|
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</template> |
|
|
</template> |
|
@ -28,9 +26,7 @@ |
|
|
* @event {Function} focus 输入框聚焦时触发的事件,参数为 event 对象 |
|
|
* @event {Function} focus 输入框聚焦时触发的事件,参数为 event 对象 |
|
|
* @event {Function} blur 输入框失焦时触发的事件,参数为 event 对象 |
|
|
* @event {Function} blur 输入框失焦时触发的事件,参数为 event 对象 |
|
|
*/ |
|
|
*/ |
|
|
import { |
|
|
|
|
|
Decimal |
|
|
|
|
|
} from 'decimal.js'; //引入 |
|
|
|
|
|
export default { |
|
|
export default { |
|
|
name: "UniNumberBox", |
|
|
name: "UniNumberBox", |
|
|
emits: ['change', 'input', 'update:modelValue', 'blur', 'focus'], |
|
|
emits: ['change', 'input', 'update:modelValue', 'blur', 'focus'], |
|
@ -66,63 +62,30 @@ |
|
|
disabled: { |
|
|
disabled: { |
|
|
type: Boolean, |
|
|
type: Boolean, |
|
|
default: false |
|
|
default: false |
|
|
}, |
|
|
|
|
|
focus: { |
|
|
|
|
|
type: Boolean, |
|
|
|
|
|
default: true |
|
|
|
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
inputValue: 0, |
|
|
inputValue: 0 |
|
|
maxlength: 10 |
|
|
|
|
|
}; |
|
|
}; |
|
|
}, |
|
|
}, |
|
|
watch: { |
|
|
watch: { |
|
|
value(val) { |
|
|
value(val) { |
|
|
this.inputValue = this.add(this.inputValue, val) |
|
|
this.inputValue = +val; |
|
|
}, |
|
|
}, |
|
|
modelValue(val) { |
|
|
modelValue(val) { |
|
|
this.inputValue = this.add(this.inputValue, val) |
|
|
this.inputValue = +val; |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
created() { |
|
|
created() { |
|
|
if (this.value === 1) { |
|
|
if (this.value === 1) { |
|
|
this.inputValue = this.add(this.inputValue, this.modelValue) |
|
|
this.inputValue = +this.modelValue; |
|
|
} |
|
|
} |
|
|
if (this.modelValue === 1) { |
|
|
if (this.modelValue === 1) { |
|
|
this.inputValue = this.add(this.inputValue, this.value) |
|
|
this.inputValue = +this.value; |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
add(num1, num2) { |
|
|
|
|
|
return new Decimal(num1).add(new Decimal(num2)) |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
sub(num1, num2) { |
|
|
|
|
|
return new Decimal(num1).sub(new Decimal(num2)) |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
mul(num1,num2) { |
|
|
|
|
|
return new Decimal(num1).mul(new Decimal(num2)) |
|
|
|
|
|
}, |
|
|
|
|
|
div(num1,num2) { |
|
|
|
|
|
return new Decimal(num1).div(new Decimal(num2)) |
|
|
|
|
|
}, |
|
|
|
|
|
checkNum(e) { |
|
|
|
|
|
let value = e.detail.value; |
|
|
|
|
|
let dot = value.indexOf('.'); //鍖呭惈灏忔暟鐐 |
|
|
|
|
|
let reg = /^[0-9]+$/; //姝f暣鏁 |
|
|
|
|
|
if (dot > -1) { |
|
|
|
|
|
this.maxlength = dot + 7; //闀垮害鏄¯灏忔暟鐐瑰悗涓や綅 |
|
|
|
|
|
if (value.length > dot + 7) { |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
if (reg.test(value)) { //濡傛灉鏄¯姝f暣鏁颁笉鍖呭惈灏忔暟鐐 |
|
|
|
|
|
this.maxlength = 10; |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
_calcValue(type) { |
|
|
_calcValue(type) { |
|
|
if (this.disabled) { |
|
|
if (this.disabled) { |
|
|
return; |
|
|
return; |
|
@ -131,7 +94,7 @@ |
|
|
let value = this.inputValue * scale; |
|
|
let value = this.inputValue * scale; |
|
|
let step = this.step * scale; |
|
|
let step = this.step * scale; |
|
|
if (type === "minus") { |
|
|
if (type === "minus") { |
|
|
value = this.sub(value - step) |
|
|
value -= step; |
|
|
if (value < (this.min * scale)) { |
|
|
if (value < (this.min * scale)) { |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
@ -141,54 +104,53 @@ |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if (type === "plus") { |
|
|
if (type === "plus") { |
|
|
value = this.add(value, step) |
|
|
value += step; |
|
|
|
|
|
if (value > (this.max * scale)) { |
|
|
if (value > (this.max * scale)) { |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
if (value < (this.min * scale)) { |
|
|
if (value < (this.min * scale)) { |
|
|
value = this.min * scale |
|
|
value = this.min * scale |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
this.inputValue = (value / scale).toFixed(String(scale).length - 1); |
|
|
this.inputValue = (value / scale).toFixed(String(scale).length - 1); |
|
|
this.$emit("change", +this.inputValue); |
|
|
this.$emit("change", +this.inputValue); |
|
|
// TODO vue2 兼容 |
|
|
// TODO vue2 兼容 |
|
|
this.$emit("input", +this.inputValue); |
|
|
this.$emit("input", +this.inputValue); |
|
|
// TODO vue3 兼容 |
|
|
// TODO vue3 兼容 |
|
|
this.$emit("update:modelValue", +this.inputValue); |
|
|
this.$emit("update:modelValue", +this.inputValue); |
|
|
}, |
|
|
}, |
|
|
_getDecimalScale() { |
|
|
_getDecimalScale() { |
|
|
|
|
|
|
|
|
let scale = 1; |
|
|
let scale = 1; |
|
|
// 浮点型 |
|
|
// 浮点型 |
|
|
if (~~this.step !== this.step) { |
|
|
if (~~this.step !== this.step) { |
|
|
scale = Math.pow(10, String(this.step).split(".")[1].length); |
|
|
scale = Math.pow(10, String(this.step).split(".")[1].length); |
|
|
} |
|
|
} |
|
|
return scale; |
|
|
return scale; |
|
|
}, |
|
|
}, |
|
|
_onBlur(event) { |
|
|
_onBlur(event) { |
|
|
this.$emit('blur', event) |
|
|
this.$emit('blur', event) |
|
|
let value = event.detail.value; |
|
|
let value = event.detail.value; |
|
|
if (!value) { |
|
|
if (!value) { |
|
|
// this.inputValue = 0; |
|
|
// this.inputValue = 0; |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
value = +value; |
|
|
value = +value; |
|
|
if (value > this.max) { |
|
|
if (value > this.max) { |
|
|
value = this.max; |
|
|
value = this.max; |
|
|
} else if (value < this.min) { |
|
|
} else if (value < this.min) { |
|
|
value = this.min; |
|
|
value = this.min; |
|
|
|
|
|
} |
|
|
|
|
|
const scale = this._getDecimalScale(); |
|
|
|
|
|
this.inputValue = value.toFixed(String(scale).length - 1); |
|
|
|
|
|
this.$emit("change", +this.inputValue); |
|
|
|
|
|
this.$emit("input", +this.inputValue); |
|
|
|
|
|
}, |
|
|
|
|
|
_onFocus(event) { |
|
|
|
|
|
this.$emit('focus', event) |
|
|
} |
|
|
} |
|
|
const scale = this._getDecimalScale(); |
|
|
|
|
|
this.inputValue = value.toFixed(String(scale).length - 1); |
|
|
|
|
|
this.$emit("change", +this.inputValue); |
|
|
|
|
|
this.$emit("input", +this.inputValue); |
|
|
|
|
|
}, |
|
|
|
|
|
_onFocus(event) { |
|
|
|
|
|
this.$emit('focus', event) |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
}; |
|
|
}; |
|
|
</script> |
|
|
</script> |
|
|
<style lang="scss" scoped> |
|
|
<style lang="scss" scoped> |
|
@ -221,7 +183,7 @@ |
|
|
.uni-numbox__value { |
|
|
.uni-numbox__value { |
|
|
margin: 0 2px; |
|
|
margin: 0 2px; |
|
|
background-color: $bg; |
|
|
background-color: $bg; |
|
|
width: 100rpx; |
|
|
width: 40px; |
|
|
height: $box-height; |
|
|
height: $box-height; |
|
|
text-align: center; |
|
|
text-align: center; |
|
|
font-size: 14px; |
|
|
font-size: 14px; |
|
|