拓展组件uni-number-box使用过程中问题汇总

1. 拓展组件uni-number-box的输入框高度超出

image.png
.uni-numbox__value {
        position: relative;
        background-color: #fff;
        width: 80upx;
        height: 100%;
        text-align: center;
        padding: 0;
        /* 解决app端输入框高度超出问题 */
        min-height: 1.2rem;
}
/* 解决app端输入框高度超出问题(未实现) */
/* .uni-numbox input{
    height: 100%;
    line-height: 70upx;
} */

2. 拓展组件uni-number-box在循环体中使用时

(1) 测试数据：

styleInfo:{
    //"num": "10",
    "num": 10,
},
processList:[
                {
                    "name": "做领子做领子做领子",
                    "process_no": "GX00003",
                    "price": "1.20",
                    "std_time": "36",
                    "process_id": "3",
                    "reworkNumber":0
                },
                {
                    "process_id": "6",
                    "name": "接后片接后片接后片接后片",
                    "process_no": "GX00006",
                    "price": "0.50",
                    "std_time": "30",
                    "reworkNumber":0
                },
                {
                    "process_id": "7",
                    "name": "水洗标水洗标水洗标水洗标水洗标水洗标",
                    "process_no": "GX00007",
                    "price": "0.80",
                    "std_time": "30",
                    "reworkNumber":0
                },
                {
                    "process_id": "8",
                    "name": "接后摆接后摆",
                    "process_no": "GX00007",
                    "price": "0.70",
                    "std_time": "31",
                    "reworkNumber":0
                }
],

(2)

<view class="uni-flex flex-sub uni-column bg-white padding-right-sm" style="height: 100%;border-right: 5px solid #eee;">
    <label class="uni-list-cell padding-tb-sm">
        <view class="jk-list-header flex-sub" style="text-align: center;">序号</view>
        <view class="jk-list-header flex-treble" style="text-align: center;">工序名称</view>
        <view class="jk-list-header flex-twice" style="text-align: center;">返工件数</view>
    </label>
    <scroll-view class="uni-center center-box" style="overflow: scroll;height: 80%;" scroll-y="true">
        <label class="uni-list-cell padding-tb-sm" v-for="(item,index) in processList" :key="item.process_id">
            <view class="jk-list-content flex-sub">{{index + 1}}</view>
            <view class="jk-list-content flex-treble text-cut" style="text-align: left;">{{item.name}}</view>
            <view class="jk-list-content flex-twice">
                <uni-number-box :value="item.reworkNumber"  :min="0" :max="styleInfo.num" @change="changeReworkNumber(item.process_id,item.reworkNumber)"></uni-number-box>
            </view>
        </label>
    </scroll-view>
</view>

注意： value、min和max为数值型，若服务器返回为字符串需先转化为整型。
(3) 效果

效果.png

(4) 问题：点击事件无法动态修改每个item的reworkNumber(reworkNumber恒为初值0，双向绑定无效)

changeReworkNumber:function(id,reworkNumber){
    console.log("changeReworkNumber:" + id + "," + reworkNumber);
    var items = this.processList;
    console.log("processList-before:" + JSON.stringify(_self.processList));
    for (var i = 0; i < items.length; i++) {
        const item = items[i];  
        if(event.cid == item.process_id){
            this.$set(item,'reworkNumber',event.value);
        }
    }
    console.log("processList-after:" + JSON.stringify(_self.processList));
},

(5) 解决：修改源码nui-number-box.vue

  • 源码：在props中新增属性cid
  • 源码：修改watch中的inputValue方法
  • 页面：布局
<uni-number-box :value="item.reworkNumber" @change="changeReworkNumber" :cid="item.process_id"></uni-number-box>
  • 页面：change方法
changeReworkNumber:function(event){
    console.log("changeReworkNumber:" + JSON.stringify(event));
    var items = this.processList;
    console.log("processList-before:" + JSON.stringify(_self.processList));
    for (var i = 0; i < items.length; i++) {
        const item = items[i];  
        if(event.cid == item.process_id){
            this.$set(item,'reworkNumber',event.value);
        }
    }
    console.log("processList-after:" + JSON.stringify(_self.processList));
},

备注：

  • uni-number-box.vue源码修改前完整代码
<template>
    <view class="uni-numbox">
        <view class="uni-numbox__minus" :class="{'uni-numbox--disabled': disableSubtract||disabled}" @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||disabled}" @click="_calcValue('add')">+</view>
    </view>
</template>
<script>
    export default {
        name: 'uni-number-box',
        props: {
            value: {
                type: Number,
                default: 1
            },
            min: {
                type: Number,
                default: 0
            },
            max: {
                type: Number,
                default: 100
            },
            step: {
                type: Number,
                default: 1
            },
            disabled: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                inputValue: this.value
            }
        },
        computed: {
            disableSubtract() {
                return this.inputValue <= this.min
            },
            disableAdd() {
                return this.inputValue >= this.max
            }
        },
        watch: {
            value(val) {
                this.inputValue = val;
            },
            inputValue(val) {
                     this.$emit('change', val);
            }
        },
        methods: {
            _calcValue(type) {
                if (this.disabled) {
                    return
                }
                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>
    @charset "UTF-8";

    .uni-numbox {
        display: inline-flex;
        flex-direction: row;
        justify-content: flex-start;
        height: 70upx;
        position: relative
    }

    .uni-numbox:after {
        content: '';
        position: absolute;
        transform-origin: center;
        box-sizing: border-box;
        pointer-events: none;
        top: -50%;
        left: -50%;
        right: -50%;
        bottom: -50%;
        border: 1px solid #c8c7cc;
        border-radius: 12upx;
        transform: scale(.5)
    }

    .uni-numbox__minus,
    .uni-numbox__plus {
        margin: 0;
        background-color: #f8f8f8;
        width: 70upx;
        font-size: 40upx;
        height: 100%;
        line-height: 70upx;
        text-align: center;
        color: #333;
        position: relative
    }

    .uni-numbox__value {
        position: relative;
        background-color: #fff;
        width: 80upx;
        height: 100%;
        line-height: 70upx;
        text-align: center;
        padding: 0;
        /* 解决app端输入框高度超出问题 */
        min-height: 1.2rem;
    }
    /* 解决app端输入框高度超出问题(未实现) */
    /* .uni-numbox input{
        height: 100%;
        line-height: 70upx;
    } */
    
    .uni-numbox__value:after {
        content: '';
        position: absolute;
        transform-origin: center;
        box-sizing: border-box;
        pointer-events: none;
        top: -50%;
        left: -50%;
        right: -50%;
        bottom: -50%;
        border-style: solid;
        border-color: #c8c7cc;
        border-left-width: 1px;
        border-right-width: 1px;
        border-top-width: 0;
        border-bottom-width: 0;
        transform: scale(.5)
    }

    .uni-numbox--disabled {
        color: silver
    }
</style>
  • uni-number-box.vue源码修改后完整代码
<template>
    <view class="uni-numbox">
        <view class="uni-numbox__minus" :class="{'uni-numbox--disabled': disableSubtract||disabled}" @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||disabled}" @click="_calcValue('add')">+</view>
    </view>
</template>
<script>
    export default {
        name: 'uni-number-box',
        props: {
            value: {
                type: Number,
                default: 1
            },
            min: {
                type: Number,
                default: 0
            },
            max: {
                type: Number,
                default: 100
            },
            step: {
                type: Number,
                default: 1
            },
            disabled: {
                type: Boolean,
                default: false
            },
            // 新增属性
            cid: {
                type: String,
                default: ""
            }
        },
        data() {
            return {
                inputValue: this.value
            }
        },
        computed: {
            disableSubtract() {
                return this.inputValue <= this.min
            },
            disableAdd() {
                return this.inputValue >= this.max
            }
        },
        watch: {
            value(val) {
                this.inputValue = val;
            },
            inputValue(val) {
                // this.$emit('change', val);
                this.$emit('change', {value: val, cid: this.cid});
            }
        },
        methods: {
            _calcValue(type) {
                if (this.disabled) {
                    return
                }
                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>
    @charset "UTF-8";

    .uni-numbox {
        display: inline-flex;
        flex-direction: row;
        justify-content: flex-start;
        height: 70upx;
        position: relative
    }

    .uni-numbox:after {
        content: '';
        position: absolute;
        transform-origin: center;
        box-sizing: border-box;
        pointer-events: none;
        top: -50%;
        left: -50%;
        right: -50%;
        bottom: -50%;
        border: 1px solid #c8c7cc;
        border-radius: 12upx;
        transform: scale(.5)
    }

    .uni-numbox__minus,
    .uni-numbox__plus {
        margin: 0;
        background-color: #f8f8f8;
        width: 70upx;
        font-size: 40upx;
        height: 100%;
        line-height: 70upx;
        text-align: center;
        color: #333;
        position: relative
    }

    .uni-numbox__value {
        position: relative;
        background-color: #fff;
        width: 80upx;
        height: 100%;
        line-height: 70upx;
        text-align: center;
        padding: 0;
        /* 解决app端输入框高度超出问题 */
        min-height: 1.2rem;
    }
    /* 解决app端输入框高度超出问题(未实现) */
    /* .uni-numbox input{
        height: 100%;
        line-height: 70upx;
    } */
    
    .uni-numbox__value:after {
        content: '';
        position: absolute;
        transform-origin: center;
        box-sizing: border-box;
        pointer-events: none;
        top: -50%;
        left: -50%;
        right: -50%;
        bottom: -50%;
        border-style: solid;
        border-color: #c8c7cc;
        border-left-width: 1px;
        border-right-width: 1px;
        border-top-width: 0;
        border-bottom-width: 0;
        transform: scale(.5)
    }

    .uni-numbox--disabled {
        color: silver
    }
</style>

注意：源码修改后单独使用时该拓展组件时需修改相关代码

<view class="uni-flex uni-row align-center jk-des">
    <text>合格件数：</text>
    <uni-number-box :value="qualifiedNumber" @change="changeQualifiedNumber"></uni-number-box>
</view>

data() {
    return {
        qualifiedNumber: 10
    }
},
  • 源码修改前的使用
changeQualifiedNumber:function(value){
    this.qualifiedNumber = value;
},
  • 源码修改后的使用
changeQualifiedNumber:function(event){
    this.qualifiedNumber = event.value;
},

3. 动态设置最大最小值时输入框显示异常且增减按钮触发异常

data() {
    return {
        qualifiedNumber: 10,
        qualifiedMin:0,
        qualifiedMax:10,
    }
},

<view class="uni-flex uni-row align-center jk-des">
    <text>合格件数：</text>
    <uni-number-box :value="qualifiedNumber" :min="qualifiedMin" :max="qualifiedMax" @change="changeQualifiedNumber"></uni-number-box>
</view>
<view class="uni-flex margin-tb-sm jk-des">合格最小值：{{qualifiedMin}},合格最大值：{{qualifiedMax}}</view>

changeQualifiedNumber:function(event){
    this.qualifiedNumber = event.value;
},
modifyNumber:function(){
    var reworkArray = [2,4,1];//此处实际是动态数据
    var reworkMin = Math.max.apply(null, reworkArray);
    var qualifiedMax = _self.styleInfo.num - reworkMin;
    console.log("qualifiedMax:" + qualifiedMax);
    _self.qualifiedMax = qualifiedMax;
    _self.qualifiedNumber = _self.qualifiedMax;
            
    var sum = eval(reworkArray.join("+"));
    var reworkMax = Math.min(sum,_self.styleInfo.num);
    var qualifiedMin = _self.styleInfo.num - reworkMax;
    console.log("qualifiedMin:" + qualifiedMin);
    _self.qualifiedMin = qualifiedMin;
},
效果.png

解决：动态变化最大最小值时，将输入框默认值设置为最大(小)值

modifyNumber:function(){
    var reworkArray = [2,4,1];//此处实际是动态数据
    var reworkMin = Math.max.apply(null, reworkArray);
    var qualifiedMax = _self.styleInfo.num - reworkMin;
    console.log("qualifiedMax:" + qualifiedMax);
    _self.qualifiedMax = qualifiedMax;
    _self.qualifiedNumber = qualifiedMax;//输入框的值设置为范围最大值
            
    var sum = eval(reworkArray.join("+"));
    var reworkMax = Math.min(sum,_self.styleInfo.num);
    var qualifiedMin = _self.styleInfo.num - reworkMax;
    console.log("qualifiedMin:" + qualifiedMin);
    _self.qualifiedMin = qualifiedMin;
},
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 215,245评论 6赞 497
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,749评论 3赞 391
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,960评论 0赞 350
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,575评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,668评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,670评论 1赞 294
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,664评论 3赞 415
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,422评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,864评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,178评论 2赞 331
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,340评论 1赞 344
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,015评论 5赞 340
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,646评论 3赞 323
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,265评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,494评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,261评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,206评论 2赞 352