bab-icon/resources/assets/js/components/UiTextarea.vue

<template>
    <el-row class="form-group">
        <el-col  style="padding-top:10px;" :span="3">
            <label style="margin-left:10px;vertical-align: middle;" class="control-label">{{label ? label : 'Textarea'}}</label>
        </el-col>
        <el-col :span="14">
            <el-input
                type="textarea"
                v-model="textarea"
                @change="selectChange"
                :placeholder="placeholder ? placeholder : ''"
                :disabled="disabled ? true : false"
                :name="name ? name : 'textarea'"
                :minlength="minlength ? parseInt(minlength) : 0"
                :maxlength="maxlength ? parseInt(maxlength) : 5000"
                :rows="rows ? parseInt(rows) : 2"
                :autosize="autosize ? autosize : false"
                :auto-complete="autoComplete ? 'on' : 'off'"
                :readonly="readonly ? true : false"
                :resize="resize ? resize : 'vertical'"
                :autofocus="autofocus ? true : false">
            </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','rows','autosize','readonly','resize','autofocus','autoComplete','tips'],
        data() {
            return {
                textarea: this.value ? this.value : ''
            };
        },
        mounted() {

        },
        methods: {
            selectChange(value) {
                this.$emit('set-keys',value);
            },
        }
    }
</script>

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