bab-icon/resources/js/components/UiInput.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 : 'Text'}}</label>
        </el-col>
        <el-col :span="14">
            <el-input
                :type="typeV"
                v-model="text"
                :placeholder="placeholder ? placeholder : ''"
                :disabled="disabled ? true : false"
                :name="name ? name : 'text'"
                :minlength="minlength ? parseInt(minlength) : 0"
                :maxlength="maxlength ? parseInt(maxlength) : 200"
                :auto-complete="autoComplete ? 'on' : 'off'"
                :readonly="readonly ? true : false"
                :show-password="showPassword ? true : false"
                :autofocus="autofocus ? true : false"
                :id="name"
                :size="size ? size : 'large'">
            </el-input>
        </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','value','placeholder','disabled','name','minlength','maxlength','readonly','autofocus','autoComplete','size','tips', 'type', 'showPassword'],
        data() {
            return {
                text: this.value ? this.value : '',
                typeV: this.type ? this.type : 'text'
            };
        },
        mounted() {},
        methods: {}
    }
</script>

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