111

uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue

@@ -1,12 +1,15 @@
 <template>
 	<view class="uni-numbox">
 		<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 }" :style="{color}">-</text>
+			<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }"
+				:style="{color}">-</text>
 		</view>
-		<input :disabled="disabled" @focus="_onFocus" @blur="_onBlur" class="uni-numbox__value" type="number"
+		<input v-if="!showText" :disabled="disabled" @focus="_onFocus" @blur="_onBlur" class="uni-numbox__value"
-			v-model="inputValue" :style="{background, color}" />
+			type="number" v-model="inputValue" :style="{background, color}" />
+		<view v-if="showText" class="uni-numbox__value" :style="{background, color}">{{inputValue}}</view>
 		<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 }" :style="{color}">+</text>
+			<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }"
+				:style="{color}">+</text>
 		</view>
 	</view>
 </template>
@@ -66,7 +69,8 @@
 		},
 		data() {
 			return {
-				inputValue: 0
+				inputValue: 0,
+				showText: false
 			};
 		},
 		watch: {
@@ -86,6 +90,12 @@
 			}
 		},
 		methods: {
+			showText() {
+				this.showText = true
+			},
+			showEdit() {
+				this.showText = false
+			},
 			_calcValue(type) {
 				if (this.disabled) {
 					return;
@@ -154,7 +164,7 @@
 		}
 	};
 </script>
-<style lang="scss" >
+<style lang="scss">
 	$box-height: 26px;
 	$bg: #f5f5f5;
 	$br: 2px;
@@ -186,6 +196,7 @@
 		background-color: $bg;
 		width: 40px;
 		height: $box-height;
+		line-height: $box-height;
 		text-align: center;
 		font-size: 14px;
 		border-left-width: 0;