实现textarea自动撑开

需求设想

实现一个具有默认高度，且随着输入内容的增加自动撑开高度的输入框

技术支持

• visibility: hidden; 隐藏DOM但是仍然占位
• contenteditable="true" 为div添加属性可以模拟输入

方法

div模拟textarea实现

HTML:
<div class="full-test" contenteditable="true">
    {{divInputValue}}
</div>

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:
<div class="full-box">
    <p>
        {{textareaValue}}
    </p>
    <textarea placeholder="输入文字" v-model="textareaValue"></textarea>
</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: ''
        }
    }
}

这种方式的实现思路是textarea跟随父元素高度，同时用兄弟原色撑开父元素即可

值得注意的点是p标签与textarea的文字设置需要一致

组件封装

/**
 * 实现随着输入内容增多，自动增高的输入框
 * 父组件调用示例:
 * <taTextarea 
 *  :textareaValue="divInputValue" 
 *  v-model="divInputValue"></taTextarea>
 * @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"></textarea>
    </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>