textarea自動サポートを実現

デフォルトの高さで、入力内容の増加に伴って自動的に高さを開く入力ボックスを実現します. visibility: hidden;DOMを隠してもまだ占有contenteditable="true"はdiv属性を追加してアナログ入力可能 div textarea

HTML:

    {{divInputValue}}


CSS:
.full-test{
    width: 100%;
    min-height: 40px;
    height: auto;
    overflow: auto;

    border: 1px solid black;
    outline: none;
}

JS:
export default {
    data () {
        return {
            divInputValue: ''
        }
    }
}

この方法は実現できますが、私のvueプロジェクトでは、リフレッシュすると失効し、サービスを再開しなければならないという問題があります. p

HTML:

    

        {{textareaValue}}
    
    </div>

CSS:
.full-box
        width: 100%;
        height: auto;
        background-color: #fff;
        position: relative;

        p
            margin: 0;
            padding: 0;
            visibility: hidden;
            word-wrap: break-word;
            line-height: 1.16rem;
            min-height: 30px;

        textarea
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            text-align: left;
            line-height: 1.15rem;
            margin: 0;
            padding: 0;
            
JS:
export default {
    data () {
        return {
            textareaValue: ''
        }
    }
}
</code></pre> 
  <blockquote> 
   <p>          <code>textarea</code>       ，              </p> 
   <p>       <code>p</code>   <code>textarea</code>         </p> 
  </blockquote> 
  <h5><code>    </code></h5> 
  <pre><code>/**
 *           ，        
 *        :
 * <tatextarea :textareavalue="divInputValue" v-model="divInputValue"/>
 * @time: 2018.9.20
 * @Author: Nick_yangxiaotong
 */

<template>
    <div class="ta-textarea">
        <p>
            {{textValue}}
        </p>
        <textarea :class="{ 'align-right': alignRight }" :placeholder="placeholder" v-model="textValue"/>
    </div>
</template>

<script>

export default {
    data () {
        return {
            textValue: ''
        }
    },
    props: {
        textareaValue: {    //     
            type: String,
            default: ''
        },
        placeholder: {  //       
            type: String,
            default: '   '
        },
        alignRight: {   //          
            type: Boolean,
            default: false
        }
    },
    created () {
        if (this.textareaValue) this.textValue = this.textareaValue
    },
    watch: {
        //       ，      
        textValue () {
            this.$emit('input', this.textValue)
        }
    }
}
</script>

<style lang="stylus" scoped="">
    .ta-textarea
        width: 100%;
        height: auto;
        background-color: #fff;
        position: relative;

        p
            margin: 0;
            padding: 0;
            visibility: hidden;
            word-wrap: break-word;
            line-height: 1.16rem;
            min-height: 30px;

        textarea
            position: absolute;
            top: 0;
            left: 0;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            line-height: 1.15rem;
            text-align left;
        .align-right
            text-align: right;
</style>

</code></pre> 
 </div> 
</div>
                            </div>
                        </div>