不知道是不是最简单的使textarea 自适应高度的方法

Vue.js 自适应文本区域

最新推荐文章于 2024-03-07 16:20:12 发布

weixin_33774615

最新推荐文章于 2024-03-07 16:20:12 发布

阅读量56

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/59c3502bf265da064261c8f8

本文介绍了一个使用 Vue.js 实现的自适应文本区域组件。该组件能够根据输入的内容自动调整高度，确保文本完全可见的同时提供良好的用户体验。通过监听滚动、输入及按键事件，实时更新文本区域的高度。

不多说，直接上代码，额，是vueJs.

template:

<textarea
  :placeholder="placeholder"
  @scroll="handleEvent_scroll"
  @input="handleEvent_scroll"
  @keyup="handleEvent_scroll"
  ref="textarea"
></textarea>

methods:
handleEvent_scroll(event){
  this.$refs.textarea.style.minHeight = '0px';
  this.$refs.textarea.style.minHeight = event.target.scrollHeight +'px';
}
复制代码