聊天输入框，自适应高度（最大4行）

<footer :class="footerClassObject">
    <div class="textarea" id="textareaDiv">
        <textarea placeholder=""
            @input="textareaChange($event)"
        ></textarea>
    </div>
</footer>

export default{
    data () {
        return {
            rows: 1, // 当前行数
            basisPoints: 30 // 基点高度，每次增加30px
        }
    },
    computed: {
        footerClassObject () {
            return {
                'two-row': (this.basisPoints * this.rows / 30 === 2),
                'three-row': (this.basisPoints * this.rows / 30 === 3),
                'four-row': (this.basisPoints * this.rows / 30 >= 4)
            }
        }
    },
    methods: {
        textareaChange (event) {
            if (event.target.value === null || event.target.value === '') {
                return
            }
            // 判断换行符的个数
            let lineNum = 0
            const re = /
/g
            if (re.test(event.target.value)) {
                lineNum = event.target.value.match(/
/g).length
            }
            // 根据换行符进行数组切割，判断是否有自动换行
            let autoLineNum = 0
            let splitArr = event.target.value.split('
')
            for (let i = 0; i < splitArr.length; i++) {
                // 当前textarea宽度，经测算可以容纳31个字符长度，一个中文占俩个字符长度
                // 由（width/font-size）* 2 计算得出31
                let charLength = 0 // 当前字符长度
                for (let j = 0; j < splitArr[i].length; j++) {
                    if (splitArr[i][j].charCodeAt(0) < 299) {
                        charLength++
                    } else {
                        charLength += 2
                    }
                }
                autoLineNum = autoLineNum + parseInt((charLength - 1) / 31)
            }
            let allRowNum = lineNum + autoLineNum
            if (allRowNum >= 3) {
                this.rows = 4
            } else {
                this.rows = allRowNum + 1
            }
            console.log(this.rows)
        }
    },
}


// 样式
footer{
        position: fixed;
        bottom: 0;
        height: 0.79rem;
         7.1rem;
        background: #ededef;
        border-top: 1px solid #a8a8aa;
        padding: 0.18rem 0.2rem;
        &.two-row{
            height: 1.09rem;
            .left-icon{margin-top: 0.4rem;}
            .textarea{
                height: 0.6rem;
                textarea{height: 0.6rem;}
            }
        }
        &.three-row{
            height: 1.39rem;
            .left-icon{margin-top: 0.7rem;}
            .textarea{
                height: 0.9rem;
                textarea{height: 0.9rem;}
            }
        }
        &.four-row{
            height: 1.69rem;
            .left-icon{margin-top: 1rem;}
            .textarea{
                height: 1.2rem;
                textarea{height: 1.2rem;}
            }
        }
        >span,>.textarea{ float: left; }
        .left-icon{
            font-size: 0.6rem;
            margin: 0.1rem 0.2rem 0.1rem 0;
        }
        .textarea{
             4.36rem;
            height: 0.3rem;
            border: 1px solid #dcdcdc;
            border-radius: 0.1rem;
            padding: 0.24rem 0.16rem;
            background-color: #fff;
            textarea{
                float: left;
                 100%; /*自动适应父布局宽度*/
                height: 0.3rem;
                padding: 0;
                border: none;
                outline: none;
                resize: none;
                font-size: 0.28rem;
                line-height: 0.3rem;
                overflow:auto;
                word-break:break-all;
                height: expression((this.scrollHeight>120)?'120px':(this.scrollHeight+30)+'px');
            }
        }
    }