小程序 textarea 属性 line-height auto-height 解决方案(独此一家)

问题： 我们知道  小程序中 textarea  在设置  auto-height 情况下， 会自动设置 height 的高度；而他自动设置的高度，是以 字体大小的高度来设置的，而不是以 line-height 高度来自适应设置，从而导致  换行后，真实高度小于  文字展示需要高度，出现文字滚动的情况。

遍观网上，基本存在 一种解决不完美的解决方案； 

（不采用）： 设置 textarea里 font-size 和 line-height 一致；这样高度就对的上了，但是 行高很小，不符合UI设计稿，难看！

故，经过本人研究，可采取以下方式完美解决。

1.给textarea的最小高度设置为  父级元素的 100%,从而覆盖掉小程序计算的height属性，使真实高度以父级元素高度为准。

2.通过 linechange 换行方法，来动态计算 父级元素的高度（this.minHieght = lineCount * 40;），

从而使 textarea的最小高度跟随父级动态变化，完美符合 页面需要的展示高度。

（花了一下午时间，解决此问题，特此分享，已备大家参考，践行开源精神）

<view 
        :style="{height: minHieght + 'rpx'}"
        class="content" >
            <textarea
            class="text-input"
            :value="value"
            maxlength="30"
            :auto-height="autoHeight"
            disable-default-padding
            placeholder="写标题，可以吸引更多人看哦～"
            placeholder-style="font-size: 28rpx;color: #BBBBBB;"
            @input="changeInput"
            @linechange="linechange"
            ></textarea>
        </view>

data() {
            return {
                minHieght: 40,
                autoHeight: true
            }
        },
        methods: {
            changeInput(e) {
                const {
                    value
                } = e.detail;
                this.$emit('update:value', value);
            },
            linechange(e) {
                const {
                    lineCount
                } = e.detail;
                this.minHieght = lineCount * 40;
                console.log(lineCount, '数据')
            }
        }

.text-input{
            min-height: 100%;
            display: block;
            line-height: 40rpx;
            font-size: 28rpx;
            font-weight: 400;
            color: #404040;
        }

效果图：

后续发现  ，linechange 监听行数 不准确，存在 bug.

故采用 监听 textarea元素高度，取整为 最接近的固定 line-height的倍数的高度，为父级高度，解决高度问题