<template>
    <div 
        :contenteditable="readonly"
        :title="value"
        class="textarea"
        :class="{borderRed: borderRed, disableDiv:!readonly}"
        @input="handInput"
        @blur="handleBlur"
    >   
        {{value}}
    </div>
</template>
<script>
export default {
    name: 'Textarea',
    props: ['readonly','value','borderRed'],
    data() {
        return {

        }
    },
    methods: {
        handInput(e) {
           this.$emit("handleInp",e.target.innerText.replace(/\s+/g,""))
        },
        handleFocus() {

        },
        handleBlur() {
            console.log('blur')
        }
    }
}
</script>
<style scoped lang='less'>
    .textarea{
        outline: none;
    }
    .borderRed {
        border: 3px solid red ;
        box-sizing: border-box;
    }
    .disableDiv {
        background: rgb(236, 236, 236);
        box-sizing: border-box;
        cursor: not-allowed;
        font-size: 14px;
        line-height: 20px;
        padding: 5px 0;
        min-height: 30px;
    }
</style>