123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476 |
- <template>
- <view class="u-numberbox">
- <view
- class="u-icon-minus"
- @touchstart.prevent="btnTouchStart('minus')"
- @touchend.stop.prevent="clearTimer"
- :class="{ 'u-icon-disabled': disabled || inputVal <= min }"
- :style="{
- background: bgColor,
- height: inputHeight + 'rpx',
- color: color,
- fontSize: size + 'rpx',
- minHeight: '1.4em'
- }"
- >
- <view :style="'font-size:' + (Number(size) + 10) + 'rpx'" class="num-btn">-</view>
- </view>
- <input
- :disabled="disabledInput || disabled"
- :cursor-spacing="getCursorSpacing"
- :class="{ 'u-input-disabled': disabled }"
- v-model="inputVal"
- class="u-number-input"
- @blur="onBlur"
- type="number"
- :style="{
- color: color,
- fontSize: size + 'rpx',
- background: bgColor,
- height: inputHeight + 'rpx',
- width: inputWidth + 'rpx'
- }"
- />
- <view
- class="u-icon-plus"
- @touchstart.prevent="btnTouchStart('plus')"
- @touchend.stop.prevent="clearTimer"
- :class="{ 'u-icon-disabled': disabled || inputVal >= max }"
- :style="{
- background: bgColor,
- height: inputHeight + 'rpx',
- color: color,
- fontSize: size + 'rpx',
- minHeight: '1.4em'
- }"
- >
- <view :style="'font-size:' + (Number(size) + 10) + 'rpx'" class="num-btn">+</view>
- </view>
- </view>
- </template>
- <script>
- export default {
- name: "u-numberbox",
- emits: ["update:modelValue", "input", "change", "blur", "plus", "minus"],
- props: {
-
- value: {
- type: Number,
- default: 1
- },
- modelValue: {
- type: Number,
- default: 1
- },
-
- bgColor: {
- type: String,
- default: "#F2F3F5"
- },
-
- min: {
- type: Number,
- default: 0
- },
-
- max: {
- type: Number,
- default: 99999
- },
-
- step: {
- type: Number,
- default: 1
- },
-
- stepFirst: {
- type: Number,
- default: 0
- },
-
- stepStrictly: {
- type: Boolean,
- default: false
- },
-
- disabled: {
- type: Boolean,
- default: false
- },
-
- size: {
- type: [Number, String],
- default: 26
- },
-
- color: {
- type: String,
- default: "#323233"
- },
-
- inputWidth: {
- type: [Number, String],
- default: 80
- },
-
- inputHeight: {
- type: [Number, String],
- default: 50
- },
-
- index: {
- type: [Number, String],
- default: ""
- },
-
-
- disabledInput: {
- type: Boolean,
- default: false
- },
-
- cursorSpacing: {
- type: [Number, String],
- default: 100
- },
-
- longPress: {
- type: Boolean,
- default: true
- },
-
- pressTime: {
- type: [Number, String],
- default: 250
- },
-
- positiveInteger: {
- type: Boolean,
- default: true
- }
- },
- watch: {
- valueCom(v1, v2) {
-
- if (!this.changeFromInner) {
- this.inputVal = v1;
-
-
-
- this.$nextTick(function() {
- this.changeFromInner = false;
- });
- }
- },
- inputVal(v1, v2) {
-
- if (v1 == "") return;
- let value = 0;
-
- let tmp = this.isNumber(v1);
- if (tmp && v1 >= this.min && v1 <= this.max) value = v1;
- else value = v2;
-
- if (this.positiveInteger) {
-
- if (v1 < 0 || String(v1).indexOf(".") !== -1) {
- value = v2;
-
- this.$nextTick(() => {
- this.inputVal = v2;
- });
- }
- }
-
- this.handleChange(value, "change");
- },
- min(v1) {
- if (v1 !== undefined && v1 != "" && this.valueCom < v1) {
- this.$emit("input", v1);
- }
- },
- max(v1) {
- if (v1 !== undefined && v1 != "" && this.valueCom > v1) {
- this.$emit("input", v1);
- }
- }
- },
- data() {
- return {
- inputVal: 1,
- timer: null,
- changeFromInner: false,
- innerChangeTimer: null,
- };
- },
- created() {
- this.inputVal = Number(this.valueCom);
- },
- mounted() {
- },
- computed: {
- getCursorSpacing() {
-
- return Number(uni.upx2px(this.cursorSpacing));
- },
- valueCom(){
-
- return this.value;
-
-
- return this.modelValue;
-
- }
- },
- methods: {
-
- btnTouchStart(callback) {
-
- this[callback]();
-
- if (!this.longPress) return;
- clearInterval(this.timer);
- this.timer = null;
- this.timer = setInterval(() => {
-
- this[callback]();
- }, this.pressTime);
- },
- clearTimer() {
- this.$nextTick(() => {
- clearInterval(this.timer);
- this.timer = null;
- });
- },
- minus() {
- this.computeVal("minus");
- },
- plus() {
- this.computeVal("plus");
- },
-
- calcPlus(num1, num2) {
- let baseNum, baseNum1, baseNum2;
- try {
- baseNum1 = num1.toString().split(".")[1].length;
- } catch (e) {
- baseNum1 = 0;
- }
- try {
- baseNum2 = num2.toString().split(".")[1].length;
- } catch (e) {
- baseNum2 = 0;
- }
- baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
- let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2;
- return ((num1 * baseNum + num2 * baseNum) / baseNum).toFixed(precision);
- },
-
- calcMinus(num1, num2) {
- let baseNum, baseNum1, baseNum2;
- try {
- baseNum1 = num1.toString().split(".")[1].length;
- } catch (e) {
- baseNum1 = 0;
- }
- try {
- baseNum2 = num2.toString().split(".")[1].length;
- } catch (e) {
- baseNum2 = 0;
- }
- baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
- let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2;
- return ((num1 * baseNum - num2 * baseNum) / baseNum).toFixed(precision);
- },
- computeVal(type) {
- uni.hideKeyboard();
- if (this.disabled) return;
- let value = 0;
-
-
- if (type === "minus") {
- if (this.stepFirst > 0 && this.inputVal == this.stepFirst) {
- value = this.min;
- } else {
- value = this.calcMinus(this.inputVal, this.step);
- }
- } else if (type === "plus") {
- if (this.stepFirst > 0 && this.inputVal < this.stepFirst) {
- value = this.stepFirst;
- } else {
- value = this.calcPlus(this.inputVal, this.step);
- }
- }
- if (this.stepStrictly) {
- let strictly = value % this.step;
- if (strictly > 0) {
- value -= strictly;
- }
- if (this.stepFirst > 0 && value > 0 && value < this.stepFirst) {
- if (type === "minus") {
- value = 0;
- } else if (type === "plus") {
- value = this.stepFirst + (this.step - (this.stepFirst % this.step));
- }
- }
- }
- if (value > this.max) {
- value = this.max;
- } else if (value < this.min) {
- value = this.min;
- }
-
- this.inputVal = value;
- this.handleChange(value, type);
- },
-
- onBlur(event) {
- let val = 0;
- let value = event.detail.value;
-
-
- if (!/(^\d+$)/.test(value) || value[0] == 0) val = this.min;
- val = +value;
-
- if (this.stepFirst > 0 && this.inputVal < this.stepFirst && this.inputVal > 0) {
- val = this.stepFirst;
- }
-
- if (this.stepStrictly) {
- let strictly = val % this.step;
- if (strictly > 0) {
- val -= strictly;
- }
- if (this.stepFirst > 0 && val > 0 && val < this.stepFirst) {
- val = this.stepFirst + (this.step - (this.stepFirst % this.step));
- }
- }
- if (val > this.max) {
- val = this.max;
- } else if (val < this.min) {
- val = this.min;
- }
- this.$nextTick(() => {
- this.inputVal = val;
- });
- this.handleChange(val, "blur");
- },
- handleChange(value, type) {
- if (this.disabled) return;
-
- if (this.innerChangeTimer) {
- clearTimeout(this.innerChangeTimer);
- this.innerChangeTimer = null;
- }
-
- this.changeFromInner = true;
-
-
- this.innerChangeTimer = setTimeout(() => {
- this.changeFromInner = false;
- }, 150);
- this.$emit("input", Number(value));
- this.$emit("update:modelValue", Number(value));
- this.$emit(type, {
-
- value: Number(value),
- index: this.index
- });
- },
-
- isNumber(value) {
- return /^(?:-?\d+|-?\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test(value);
- }
- }
- };
- </script>
- <style lang="scss" scoped>
- .u-numberbox {
- display: inline-flex;
- align-items: center;
- }
- .u-number-input {
- position: relative;
- text-align: center;
- padding: 0;
- margin: 0 6rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .u-icon-plus,
- .u-icon-minus {
- width: 60rpx;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .u-icon-plus {
- border-radius: 0 8rpx 8rpx 0;
- }
- .u-icon-minus {
- border-radius: 8rpx 0 0 8rpx;
- }
- .u-icon-disabled {
- color: #c8c9cc !important;
- background: #f7f8fa !important;
- }
- .u-input-disabled {
- color: #c8c9cc !important;
- background-color: #f2f3f5 !important;
- }
- .num-btn {
- font-weight: 550;
- position: relative;
- top: -4rpx;
- }
- .num-btn {
- font-weight: 550;
- position: relative;
- top: 0rpx;
- }
- </style>
|