<template>
    <el-input clearable  type="text"   :maxlength="data.maxlength" v-model='parent.formModel[data.id]' autocomplete='off' :disabled='data.disabled||!!parent.readonly' :placeholder='data.placeholder'   :show-word-limit="parent.showWordLimit" >
        <template slot="prepend" v-if='data.prepend'>{{data.prepend}}</template>
        <template slot="prepend" v-else-if="data.prependIcon">
            <el-button :icon="data.prependIcon" />
        </template>
        <template slot="append" v-else-if="data.appendIcon">
            <el-button :icon="data.appendIcon" />
        </template>
        <template slot="append" v-else-if="data.append">
            {{data.append}}
        </template>
    </el-input>
</template>

<script>
export default {
    props: {
        data: {
            require: false,
            type: Object
        },
        validator:{
            require: false,
            type:Function
        },
        forms:{
            require: false,
            type: Object
        },
        _p:{
            require: false,
            type: Object
        }
    },
    data(){
        return {
            parent:this._p
        }
    }
}
</script>

<style lang="less" scoped>
    :deep(.el-input-group__prepend,.el-input-group__append){
        --el-input-border-color:#dcdfe6;
        min-width:56px;
        border-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        align-items: center;
        justify-content: center;
        display: flex;
    }
</style>
