vue textarea自适应高度（自动撑开，无需js）

思路：在一个div容器中放置两个内容，一个是设置了visibility: hidden;的div，用来承载文本内容，并称开div容器，textarea则使用position定位，使其始终占满div容器，具体设置如下。
dom结构

 <div class="area-container">
    <textarea ref="area" v-model="text"  placeholder="请输入标题"/>
    <div ref="areaMapping" class="area-mapping">{{ text }}</div>
</div>

样式

.area-container {
        position: relative;
}
textarea,.area-mapping{
            width: 100%;
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 26px;
            line-height: 30px;
            font-weight: bold;
            font-family: sans-serif;
            resize: none;
            outline: none;
}
textarea{
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                z-index: 1;
}
.area-mapping{
                visibility: hidden;
}

必须注意的是，div和textarea的字体设置、宽度、margin、padding需要一致，以免发生偏移