input框过滤非数字/去掉数字前的0/单独的0不用过滤---运用model封装组件

。

此方法是放在input框的input事件内的：

            this.timeNum = String(this.timeNum).replace(/\D/g, '');//过滤到非数字
            this.timeNum = parseInt(this.timeNum);
            if(isNaN(this.timeNum)){
                this.timeNum = 0;
            }

下面是封装的一个组件：

<template>
    <div 
        class="hb_time_select"
        :class="cusClass">
        <el-input 
            class="origin_input"
            size="small"
            v-model="timeNum"
            :disabled="disabled"
            @input="timeNumInput"
            @change="timeNumChange">
        </el-input>
        <el-select
            class="time_select"
            size="small"
            v-model="unit"
            @change="unitChange"
            :disabled="disabled"
            >
            <el-option label="分钟" value="1"></el-option>
            <el-option label="小时" value="2"></el-option>
            <el-option label="天" value="3"></el-option>
        </el-select>
    </div>
</template>

<script>
export default {
    model:{
        prop:'value',//双向绑定props中的value，默认也是这个值（需在prop中声明）
        event:'input',//触发双向绑定的事件input，默认也是这个事件，可以自定义事件（需在method中声明）
    },
    props:{
        cusClass:{
        //自定义类名
            type:String,
            default:'0,1'
        },
        disabled:false,
        value:'',//声明一下value，否则初始值为undefined
    },
    watch:{
        value:{
            handler(newVal){
                console.log(newVal,111111111);
                if(newVal){
                    let timeArr = newVal.split(",");
                    this.timeNum = timeArr[0];
                    this.unit = timeArr[1];
                }else{
                    this.timeNum = 0;
                    this.unit = '1';
                    let value = `${this.timeNum},${this.unit}`;
                    this.$emit('input',String(value));
                }
            },
            immediate:true,
        }
    },
    data(){
        return{
            timeNum:0,
            unit:'1'
        }
    },
    methods:{
        timeNumInput(val){
        // 时间输入框input事件
            this.timeNum = String(this.timeNum).replace(/\D/g, '');//过滤到非数字
            this.timeNum = parseInt(this.timeNum);
            if(isNaN(this.timeNum)){
                this.timeNum = 0;
            }
            let value = `${this.timeNum},${this.unit}`;
            this.$emit('input',String(value));
        },
        timeNumChange(){
        //时间输入框change事件事件
            let value = `${this.timeNum},${this.unit}`;
            this.$emit("change",value);
        },
        unitChange(val){
        //时间单位输入框改变
            let value = `${this.timeNum},${this.unit}`;
            this.$emit('input',String(value));
            this.$emit("change",value);
        }
    }
}
</script>

<style lang="scss" scoped>
.hb_time_select{
    width:230px;
    display: flex;
    align-items: center;
    .origin_input{
        flex:1;
        flex-shrink: 0;
    }
    .time_select{
        width:88px;
        flex-shrink: 0;
    }
}
</style>

效果：

 

 

。