vue textarea高度自适应方法挺简短的

原创

于 2021-01-18 18:35:37 发布 · 694 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #javascript #vue.js

本文介绍了如何在Vue.js应用中实现textarea的高度自适应，思路来源于https://alistapart.com/article/expanding-text-areas-made-elegant/。通过简化代码，只保留关键部分，并在.methods中添加相应的方法，可以轻松实现textarea内容变化时高度自动调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个方法的思路借鉴了https://alistapart.com/article/expanding-text-areas-made-elegant/

效果：

代码：（去掉了不关键的样式部分) 注意：要加样式的话在.input{}里加

<div class="text">
    <pre class="input"><span ref="preTxt"></span><br/></pre>
    <textarea class="input" ref="textarea" rows="1" @input="resizeArea"></textarea>
</div>

    .text {
      position: relative;
      width: 200px;
      min-height: 20px;
    }
    .input {
      width: 100%;
      word-wrap: break-word;
      white-space: pre-wrap;
      overflow: hidden;
    }
    textarea {
      height: 100%;