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

最新推荐文章于 2025-10-11 09:35:20 发布

原创

最新推荐文章于 2025-10-11 09:35:20 发布 · 752 阅读

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内容变化时高度自动调整。

这个方法的思路借鉴了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%;