拓展組件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端輸入框高度超出問題(未實(shí)現(xiàn)) */
/* .uni-numbox input{
    height: 100%;
    line-height: 70upx;
} */

2. 拓展組件uni-number-box在循環(huán)體中使用時

(1) 測試數(shù)據(jù)：

styleInfo:{
    //"num": "10",
    "num": 10,
},
processList:[
                {
                    "name": "做領(lǐng)子做領(lǐng)子做領(lǐng)子",
                    "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": "水洗標(biāo)水洗標(biāo)水洗標(biāo)水洗標(biāo)水洗標(biāo)水洗標(biāo)",
                    "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;">返工件數(shù)</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為數(shù)值型，若服務(wù)器返回為字符串需先轉(zhuǎn)化為整型。
(3) 效果

效果.png

(4) 問題：點(diǎn)擊事件無法動態(tài)修改每個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
                // 浮點(diǎn)型
                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端輸入框高度超出問題(未實(shí)現(xiàn)) */
    /* .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
                // 浮點(diǎn)型
                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端輸入框高度超出問題(未實(shí)現(xiàn)) */
    /* .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>

注意：源碼修改后單獨(dú)使用時該拓展組件時需修改相關(guān)代碼

<view class="uni-flex uni-row align-center jk-des">
    <text>合格件數(shù)：</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. 動態(tài)設(shè)置最大最小值時輸入框顯示異常且增減按鈕觸發(fā)異常

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

<view class="uni-flex uni-row align-center jk-des">
    <text>合格件數(shù)：</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];//此處實(shí)際是動態(tài)數(shù)據(jù)
    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

解決：動態(tài)變化最大最小值時，將輸入框默認(rèn)值設(shè)置為最大(小)值

modifyNumber:function(){
    var reworkArray = [2,4,1];//此處實(shí)際是動態(tài)數(shù)據(jù)
    var reworkMin = Math.max.apply(null, reworkArray);
    var qualifiedMax = _self.styleInfo.num - reworkMin;
    console.log("qualifiedMax:" + qualifiedMax);
    _self.qualifiedMax = qualifiedMax;
    _self.qualifiedNumber = qualifiedMax;//輸入框的值設(shè)置為范圍最大值
            
    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;
},
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容