下载SKU插件

src/components/vk-data-input-number-box/vk-data-input-number-box.vue

@@ -0,0 +1,474 @@
+<!-- 步进器 -->
+<template>
+  <view class="vk-data-input-number-box">
+    <view
+      class="u-icon-minus"
+      :class="{ 'u-icon-disabled': disabled || inputVal <= min }"
+      :style="{
+        background: bgColor,
+        height: inputHeight + 'rpx',
+        color: color,
+        fontSize: size + 'rpx',
+        minHeight: '1.4em',
+      }"
+      @click="emptyClick"
+      @touchstart.prevent="btnTouchStart('minus')"
+      @touchend.stop.prevent="clearTimer"
+    >
+      <view :style="'font-size:' + (Number(size) + 10) + 'rpx'" class="num-btn">－</view>
+    </view>
+    <input
+      v-model="inputVal"
+      :disabled="disabledInput || disabled"
+      :cursor-spacing="getCursorSpacing"
+      :class="{ 'u-input-disabled': disabled }"
+      class="u-number-input"
+      type="number"
+      :style="{
+        color: color,
+        fontSize: size + 'rpx',
+        background: bgColor,
+        height: inputHeight + 'rpx',
+        width: inputWidth + 'rpx',
+      }"
+      @blur="onBlur"
+      @click="showInput = true"
+    />
+    <view
+      class="u-icon-plus"
+      :class="{ 'u-icon-disabled': disabled || inputVal >= max }"
+      :style="{
+        background: bgColor,
+        height: inputHeight + 'rpx',
+        color: color,
+        fontSize: size + 'rpx',
+        minHeight: '1.4em',
+      }"
+      @click="emptyClick"
+      @touchstart.prevent="btnTouchStart('plus')"
+      @touchend.stop.prevent="clearTimer"
+    >
+      <view :style="'font-size:' + (Number(size) + 10) + 'rpx'" class="num-btn">＋</view>
+    </view>
+  </view>
+</template>
+<script>
+/* eslint-disable */
+/**
+ * numberBox 步进器（此为uview组件改造）
+ * @description 该组件一般用于商城购物选择物品数量的场景。注意：该输入框只能输入大于或等于0的整数，不支持小数输入
+ * @tutorial https://www.uviewui.com/components/numberBox.html
+ * @property {Number} value 输入框初始值（默认1）
+ * @property {String} bg-color 输入框和按钮的背景颜色（默认#F2F3F5）
+ * @property {Number} min 用户可输入的最小值（默认0）
+ * @property {Number} max 用户可输入的最大值（默认99999）
+ * @property {Number} step 步长，每次加或减的值（默认1）
+ * @property {Number} stepFirst 步进值，首次增加或最后减的值(默认step值和一致）
+ * @property {Boolean} disabled 是否禁用操作，禁用后无法加减或手动修改输入框的值（默认false）
+ * @property {Boolean} disabled-input 是否禁止输入框手动输入值（默认false）
+ * @property {Boolean} positive-integer 是否只能输入正整数（默认true）
+ * @property {String | Number} size 输入框文字和按钮字体大小，单位rpx（默认26）
+ * @property {String} color 输入框文字和加减按钮图标的颜色（默认#323233）
+ * @property {String | Number} input-width 输入框宽度，单位rpx（默认80）
+ * @property {String | Number} input-height 输入框和按钮的高度，单位rpx（默认50）
+ * @property {String | Number} index 事件回调时用以区分当前发生变化的是哪个输入框
+ * @property {Boolean} long-press 是否开启长按连续递增或递减(默认true)
+ * @property {String | Number} press-time 开启长按触发后，每触发一次需要多久，单位ms(默认250)
+ * @property {String | Number} cursor-spacing 指定光标于键盘的距离，避免键盘遮挡输入框，单位rpx（默认200）
+ * @event {Function} change 输入框内容发生变化时触发，对象形式
+ * @event {Function} blur 输入框失去焦点时触发，对象形式
+ * @event {Function} minus 点击减少按钮时触发(按钮可点击情况下)，对象形式
+ * @event {Function} plus 点击增加按钮时触发(按钮可点击情况下)，对象形式
+ * @example <vk-data-input-number-box :min="1" :max="100"></vk-data-input-number-box>
+ */
+export default {
+	name: 'vk-data-input-number-box',
+	emits: ['update:modelValue', 'input', 'change', 'blur', 'plus', 'minus'],
+	props: {
+		// 预显示的数字
+		value: {
+			type: Number,
+			default: 1
+		},
+		modelValue: {
+			type: Number,
+			default: 1
+		},
+		// 背景颜色
+		bgColor: {
+			type: String,
+			default: '#FFFFFF'
+		},
+		// 最小值
+		min: {
+			type: Number,
+			default: 0
+		},
+		// 最大值
+		max: {
+			type: Number,
+			default: 99999
+		},
+		// 步进值，每次加或减的值
+		step: {
+			type: Number,
+			default: 1
+		},
+		// 步进值，首次增加或最后减的值
+		stepFirst: {
+			type: Number,
+			default: 0
+		},
+		// 是否只能输入 step 的倍数
+		stepStrictly: {
+			type: Boolean,
+			default: false
+		},
+		// 是否禁用加减操作
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		// input的字体大小，单位rpx
+		size: {
+			type: [Number, String],
+			default: 26
+		},
+		// 加减图标的颜色
+		color: {
+			type: String,
+			default: '#323233'
+		},
+		// input宽度，单位rpx
+		inputWidth: {
+			type: [Number, String],
+			default: 80
+		},
+		// input高度，单位rpx
+		inputHeight: {
+			type: [Number, String],
+			default: 50
+		},
+		// index索引，用于列表中使用，让用户知道是哪个numberbox发生了变化，一般使用for循环出来的index值即可
+		index: {
+			type: [Number, String],
+			default: ''
+		},
+		// 是否禁用输入框，与disabled作用于输入框时，为OR的关系，即想要禁用输入框，又可以加减的话
+		// 设置disabled为false，disabledInput为true即可
+		disabledInput: {
+			type: Boolean,
+			default: false
+		},
+		// 输入框于键盘之间的距离
+		cursorSpacing: {
+			type: [Number, String],
+			default: 100
+		},
+		// 是否开启长按连续递增或递减
+		longPress: {
+			type: Boolean,
+			default: true
+		},
+		// 开启长按触发后，每触发一次需要多久
+		pressTime: {
+			type: [Number, String],
+			default: 250
+		},
+		// 是否只能输入大于或等于0的整数(正整数)
+		positiveInteger: {
+			type: Boolean,
+			default: true
+		}
+	},
+	watch: {
+		valueCom(v1, v2) {
+			// 只有value的改变是来自外部的时候，才去同步inputVal的值，否则会造成循环错误
+			if (!this.changeFromInner) {
+				this.inputVal = v1;
+				// 因为inputVal变化后，会触发this.handleChange()，在其中changeFromInner会再次被设置为true，
+				// 造成外面修改值，也导致被认为是内部修改的混乱，这里进行this.$nextTick延时，保证在运行周期的最后处
+				// 将changeFromInner设置为false
+				this.$nextTick(function() {
+					this.changeFromInner = false;
+				});
+			}
+		},
+		inputVal(v1, v2) {
+			// 为了让用户能够删除所有输入值，重新输入内容，删除所有值后，内容为空字符串
+			if (v1 == '') return;
+			let value = 0;
+			// 首先判断是否数值，并且在min和max之间，如果不是，使用原来值
+			let tmp = this.isNumber(v1);
+			if (tmp && v1 >= this.min && v1 <= this.max) value = v1;
+			else value = v2;
+			// 判断是否只能输入大于等于0的整数
+			if (this.positiveInteger) {
+				// 小于0，或者带有小数点，
+				if (v1 < 0 || String(v1).indexOf('.') !== -1) {
+					value = v2;
+					// 双向绑定input的值，必须要使用$nextTick修改显示的值
+					this.$nextTick(() => {
+						this.inputVal = v2;
+					});
+				}
+			}
+			// 发出change事件
+			this.handleChange(value, 'change');
+		},
+		min(v1) {
+			if (v1 !== undefined && v1 != '' && this.valueCom < v1) {
+				this.$emit('input', v1);
+				this.$emit('update:modelValue', v1);
+			}
+		},
+		max(v1) {
+			if (v1 !== undefined && v1 != '' && this.valueCom > v1) {
+				this.$emit('input', v1);
+				this.$emit('update:modelValue', v1);
+			}
+		}
+	},
+	data() {
+		return {
+			inputVal: 1, // 输入框中的值，不能直接使用props中的value，因为应该改变props的状态
+			timer: null, // 用作长按的定时器
+			changeFromInner: false, // 值发生变化，是来自内部还是外部
+			innerChangeTimer: null ,// 内部定时器
+			showInput:false,
+		};
+	},
+	created() {
+		this.inputVal = Number(this.valueCom);
+	},
+	computed: {
+		valueCom() {
+			// #ifndef VUE3
+			return this.value;
+			// #endif
+
+			// #ifdef VUE3
+			return this.modelValue;
+			// #endif
+		},
+		getCursorSpacing() {
+			// 先将值转为px单位，再转为数值
+			return Number(uni.upx2px(this.cursorSpacing));
+		}
+	},
+	methods: {
+		// 空点击事件，主要用于解决PC端H5由于无click事件导致触摸位置不准确的问题
+		emptyClick(){
+			
+		},
+		// 触摸事件开始
+		btnTouchStart(callback) {
+			// 先执行一遍方法，否则会造成松开手时，就执行了clearTimer，导致无法实现功能
+			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;
+			// 新增stepFirst开始
+			// 减
+			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 (value > this.max) {
+				value = this.max;
+			} else if (value < this.min) {
+				value = this.min;
+			}
+			// 新增stepFirst结束
+			this.inputVal = value;
+			this.handleChange(value, type);
+		},
+		// 处理用户手动输入的情况
+		onBlur(event) {
+			let val = 0;
+			let value = event.detail.value;
+			// 如果为非0-9数字组成，或者其第一位数值为0，直接让其等于min值
+			// 这里不直接判断是否正整数，是因为用户传递的props min值可能为0
+			if (!/(^\d+$)/.test(value) || value[0] == 0) val = this.min;
+			val = +value;
+
+			// 新增stepFirst开始
+			if (this.stepFirst > 0 && this.inputVal < this.stepFirst && this.inputVal > 0) {
+				val = this.stepFirst;
+			}
+			// 新增stepFirst结束
+			if (this.stepStrictly) {
+				let strictly = val % this.step;
+				if (strictly > 0) {
+					val -= strictly;
+				}
+			}
+			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;
+			}
+			// 发出input事件，修改通过v-model绑定的值，达到双向绑定的效果
+			this.changeFromInner = true;
+			// 一定时间内，清除changeFromInner标记，否则内部值改变后
+			// 外部通过程序修改value值，将会无效
+			this.innerChangeTimer = setTimeout(() => {
+				this.changeFromInner = false;
+			}, 150);
+			this.$emit('input', Number(value));
+			this.$emit('update:modelValue', Number(value));
+			this.$emit(type, {
+				// 转为Number类型
+				value: Number(value),
+				index: this.index
+			});
+		},
+		/**
+		 * 验证十进制数字
+		 */
+		isNumber(value) {
+			return /^(?:-?\d+|-?\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test(value);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.vk-data-input-number-box {
+	display: inline-flex;
+	align-items: center;
+	box-sizing: border-box;
+}
+
+.u-number-input {
+	position: relative;
+	text-align: center;
+	padding: 0;
+	margin: 0rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: 2rpx solid #f4f4f4;
+	border-left: 0;
+	border-right: 0;
+	box-sizing: border-box;
+}
+
+.u-icon-plus,
+.u-icon-minus {
+	width: 60rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border: 2rpx solid #f4f4f4;
+	box-sizing: border-box;
+}
+
+.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-color: #f2f3f5 !important;
+}
+
+.u-input-disabled {
+	color: #c8c9cc !important;
+	background-color: #f2f3f5 !important;
+}
+.num-btn {
+	font-weight: 550;
+	line-height: 50rpx;
+}
+</style>