因为功能需求 领导随手给我画了个什么鬼界面 里面涉及到用两个input输入框来显示文件页码范围 然后美工UI 什么的都没这一层 直接给我了 领导最大嘛

---

那就先看看这个页面输入框吧

然后这就是那样吧 下面的加减号都是偷懒直接数键盘上的加减号

---

然后问题来了, 怎么去控制这个 ipnut 输入框在输入完后判断当前输入的值是不是在范围内呢 ! 那当然是先去找官方文档啦 uniapp官网

然后参考官方文档, 在失去焦点后判断数据用 @blur 这个方法! 不过这里要注意的是显示的数值不能用 value 而是用 v-model

上代码

view 部分虽然就是照着写就行了还是拿出来占占地方好了

<view class="pageNuber">
<!-- 页码 -->
<input type="number" v-model="item.pageNumStar" @blur="starBlur(item)" />
								-
<input type="number" v-model="item.pageNumEnd" @blur="endBlur(item)"/>
</view>

因为是用 v-for 循环渲染出来的 这里 v-model 绑定的值是item下的字段
是的你没猜错, 一个页面多个input框

然后是 js 部分

			// 起始页
			starBlur(item){
				if(item.pageNumStar < 1 || item.pageNumStar === 0 || item.pageNumStar === ''){
					this.$set(item,'pageNumStar','1');
				}
				// 调用其他接口
				this.xxx();
			},
			// 尾页
			endBlur(item){
				if(item.pageNumEnd < 1 || item.pageNumEnd === 0 || item.pageNumEnd === ''){
					this.$set(item,'pageNumEnd','1');
				}
				// 调用其他接口
				this.xxx();
			},

因为怕有时候不能动态渲染的问题, 这里就用了set(), 当然你也可以直接赋值给对象里面的对应的字段也是可以的, 这里item就是input输入框上传下来的, 也就是点击对应的input的对象所有属性, 第二个字符串就是要修改的对应字段, 最后一个就是要修改的值

看上去感觉也不是太难嘛, 这里 if 判断就是超出范围之外的值都给一个默认值, 当然你也可以给它原始的默认值, 最大最小值, 我这里就偷个懒好了