统一 uni-number-box

examples/hello-uniapp/components/uni-number-box.vue

+<template>
+	<view class="uni-numbox">
+		<view class="uni-numbox-minus" :class="{'uni-numbox-disabled': disableSubtract}" @click="_calcValue('subtract')">-</view>
+		<input class="uni-numbox-value" type="number" :disabled="disabled" :value="inputValue" @blur="_onBlur">
+		<view class="uni-numbox-plus" :class="{'uni-numbox-disabled': disableAdd}" @click="_calcValue('add')">+</view>
+	</view>
+</template>
+<script>
+	export default {
+		name: 'uni-number-box',
+		props: {
+			value: {
+				type: Number,
+				default: 0
+			},
+			min: {
+				type: Number,
+				default: -Infinity
+			},
+			max: {
+				type: Number,
+				default: Infinity
+			},
+			step: {
+				type: Number,
+				default: 1
+			},
+			disabled: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				inputValue: this.value
+			}
+		},
+		computed: {
+			disableSubtract() {
+				return this.value <= this.min
+			},
+			disableAdd() {
+				return this.value >= this.max
+			}
+		},
+		watch: {
+			value(val) {
+				this.inputValue = val;
+			},
+			inputValue(val) {
+				this.$emit('change', val);
+			}
+		},
+		methods: {
+			_calcValue(type) {
+				const scale = this._getDecimalScale();
+				let value = this.inputValue * scale;
+				let step = this.step * scale;
+
+				if (type === 'subtract') {
+					value -= step
+				} else if (type === 'add') {
+					value += step
+				}
+				if (value < this.min || value > this.max) {
+					return
+				}
+				this.inputValue = value / scale;
+			},
+			_getDecimalScale() {
+				let scale = 1;
+				// 浮点型
+				if (~~this.step !== this.step) {
+					scale = Math.pow(10, (this.step + '').split('.')[1].length);
+				}
+				return scale;
+			},
+			_onBlur(event) {
+				let value = event.detail.value;
+				if (!value) {
+					this.inputValue = 0;
+					return
+				}
+				value = +value;
+				if (value > this.max) {
+					value = this.max;
+				} else if (value < this.min) {
+					value = this.min
+				}
+				this.inputValue = value
+			}
+		}
+	}
+</script>
+<style>
+	.uni-numbox {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-start;
+		height: 70upx;
+	}
+
+	.uni-numbox-minus,
+	.uni-numbox-plus {
+		margin: 0;
+		background-color: #f9f9f9;
+		width: 80upx;
+		height: 100%;
+		line-height: 70upx;
+		text-align: center;
+		color: #555555;
+	}
+
+	.uni-numbox-minus {
+		border: 2upx solid #cccccc;
+		border-right: none;
+		border-top-left-radius: 6upx;
+		border-bottom-left-radius: 6upx;
+	}
+
+	.uni-numbox-plus {
+		border: 2upx solid #cccccc;
+		border-left: none;
+		border-top-right-radius: 6upx;
+		border-bottom-right-radius: 6upx;
+	}
+
+	.uni-numbox-value {
+		border: 2upx solid #cccccc;
+		background-color: #ffffff;
+		width: 80upx;
+		height: 100%;
+		text-align: center;
+	}
+
+	.uni-numbox-disabled {
+		color: #c0c0c0;
+	}
+</style>

examples/hello-uniapp/pages/template/number-box/number-box.vue

@@ -4,34 +4,34 @@
 		<view class="uni-input-group uni-common-mt">
 			<view class="uni-input-row">
 				<label>默认</label>
-				<number-box></number-box>
+				<uni-number-box></uni-number-box>
 			</view>
 			<view class="uni-input-row">
 				<label>限定最小值和最大值</label>
-				<number-box :min="0" :max="9"></number-box>
+				<uni-number-box :min="0" :max="9"></uni-number-box>
 			</view>
 			<view class="uni-input-row">
 				<label>设定步长值（步长10）</label>
-				<number-box :step="10"></number-box>
+				<uni-number-box :step="10"></uni-number-box>
 			</view>
 			<view class="uni-input-row">
 				<label>输入框只读</label>
-				<number-box :disabled="true"></number-box>
+				<uni-number-box :disabled="true"></uni-number-box>
 			</view>
 			<view class="uni-input-row">
 				<label>获取输入的值 : {{numberValue}}</label>
-				<number-box v-on:change="onNumberChange"></number-box>
+				<uni-number-box v-on:change="onNumberChange"></uni-number-box>
 			</view>
 			<view class="uni-input-row">
 				<label>设置默认值</label>
-				<number-box :value="numberValue2"></number-box>
+				<uni-number-box :value="numberValue2"></uni-number-box>
 			</view>
 		</view>
 		<view class="uni-padding-wrap uni-common-mt">
 			<view class="uni-title">行内应用</view>
 			<view class="uni-inline-item">
 				<text>购买数量 : </text>
-				<number-box v-on:change="onNumberChange3"></number-box>
+				<uni-number-box v-on:change="onNumberChange3"></uni-number-box>
 				<text>{{numberValue3}}</text>
 			</view>
 		</view>
@@ -39,19 +39,19 @@
 	</view>
 </template>
 <script>
-	import numberBox from '../../../components/number-box.vue'
+	import uniNumberBox from '../../../components/uni-number-box.vue'
 
 	export default {
 		data() {
 			return {
-				title: 'number-box',
+				title: 'uni-number-box',
 				numberValue: 0,
 				numberValue2 : 5,
 				numberValue3 : 0
 			}
 		},
 		components: {
-			numberBox
+			uniNumberBox
 		},
 		methods: {
 			onNumberChange(value) {