bab-icon/resources/js/components/UiInputNumber.vue

<template>
    <el-row class="form-group">
        <el-col :span="3" style="min-height:50px;padding-top:10px;">
            <label style="margin-left:10px;vertical-align: middle;" class="control-label">{{label ? label : 'Number'}}</label>
        </el-col>
        <el-col :span="14">
            <el-input-number
                v-model="valueD"
                @change="handleChange"
                :min="min ? parseInt(min) : 1"
                :max="max ? parseInt(max) : 100"
                :step="step ? step : 1"
                :disabled="disabled ? disabled : false"
                :controls="controls ? false : controls">
            </el-input-number>
            <input type="text" :id="name" style="width:0;height:0.5px;border: 0 solid rgba(255,255,255,0)" :name="name ? name : 'number'" :value="valueD"/>
        </el-col>
        <el-col :span="7">
            <div class="classJs">
                <div v-if="tips">
                    <span class="red">*</span>&ensp;{{tips}}
                </div>
            </div>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        props: ['label','name','value','min','max','step','disabled','controls','tips'],
        data() {
            return {
                valueD: this.value ? this.value : 1
            };
        },
        mounted() {
            //console.log(this);
        },
        methods: {
            handleChange(value) {
                //console.log(this);
                //console.log(value);
            }
        }
    }
</script>

<style scoped>
    .el-input__inner {
        display: none;
    }
    .classJs {
        margin-left: 10px;
        vertical-align: middle;
        height:42px;
        line-height:42px;
    }
    .red{
        color: red;
    }
</style>