因为功能需求 领导随手给我画了个什么鬼界面 里面涉及到用两个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 判断就是超出范围之外的值都给一个默认值, 当然你也可以给它原始的默认值, 最大最小值, 我这里就偷个懒好了
