vue textarea高度随内容增高

### Vue 中实现 Textarea 动态调整高度在 Vue.js 中，可以通过监听 `input` 或者 `change` 事件来动态调整 `<textarea>` 的高度。以下是基于 JavaScript 原生逻辑的改进版本，在 Vue 环境中的具体实现方式。 #### 方法一：通过自定义指令实现可以创建一个自定义指令用于绑定到 `<textarea>` 上，从而实现其高度随内容的变化而自动调整。 ```javascript // 定义全局指令 v-auto-height Vue.directive('auto-height', { inserted(el) { const resize = () => { el.style.height = 'auto'; el.style.height = `${el.scrollHeight}px`; }; el.addEventListener('input', resize); // 初始化一次高度 resize(); }, }); ``` 在模板中使用该指令： ```html <template> <div> <textarea v-auto-height id="myTextarea"></textarea> </div> </template> <script> export default {}; </script> ``` 此方法利用了 Vue 的自定义指令功能[^1]，并结合原生 DOM 操作实现了高度的动态调整。 --- #### 方法二：通过组件封装实现如果希望更灵活地控制行为，也可以将上述逻辑封装成一个独立的 Vue 组件。 ```html <template> <textarea :value="modelValue" @input="handleInput" ref="textareaRef"></textarea> </template> <script> export default { props: ['modelValue'], methods: { handleInput(event) { this.$emit('update:modelValue', event.target.value); const textarea = this.$refs.textareaRef; textarea.style.height = 'auto'; // 清除之前的固定高度设置 textarea.style.height = `${textarea.scrollHeight}px`; // 更新为新高度 } } }; </script> ``` 调用时可以直接传递 `v-model` 来同步数据： ```html <AutoResizeTextarea v-model="content" /> ``` 这种方法更加模块化，适合大型项目中复用场景[^2]。 --- #### 解决滚动条跳动问题对于因输入框高度变化而导致页面其他部分发生抖动的情况，可以在 CSS 层面添加过渡效果平滑处理视觉体验；或者锁定父容器的高度不变，仅允许内部溢出区域显示滚动条。示例样式如下： ```css .scrollable-container { overflow-y: auto; max-height: 300px; /* 设定最大高度 */ } ``` 同时确保触发重新计算布局的操作不会频繁影响整体文档流结构稳定性。 --- ### 总结无论是采用自定义指令还是单独构建组件形式，核心思路都是实时监控用户的键盘交互动作，并及时更新目标元素尺寸属性值以匹配最新需求状态。以上两种方案均能有效达成预期目的——让多行文本域具备按需扩展特性的同时兼顾用户体验优化考量因素。

阅读全文

vue textarea高度随内容增高

相关推荐

Vue下textarea文本框根据内容自适应改变高度

auto-textarea:基于Vue的高度自适应文本输入框

Vue实现动态显示textarea剩余字数

VUE监控textarea输入的字符数量

vue获取textarea的光标位置.js

my-textarea.vue

css textarea 高度自适应,无滚动条

Vue实现textarea固定输入行数与添加下划线样式的思路详解

Vue 自适应高度表格的实现方法

vue+elementUI 实现内容区域高度自适应的示例

vue结合html实时截取textarea文本

vue-textarea-autogrow-directive:Vue指令可在您键入时自动调整文本区域的大小，并支持复制，粘贴和检测可见性更改

vue + el-input 中 textarea 实现 placeholder 换行

textarea自适应高度标签，去除难看的滚动条

实现定宽textarea自适应内容高度的动态调整

实现Vue自适应文本输入框的新组件auto-textarea

Vue.js指令控制input/textarea自动聚焦流程

Vue点击按钮实现内容隐藏与显示实例

spring-boot-2.3.0.RC1.jar中文-英文对照文档.zip

presto-jdbc-0.238.1.jar中文文档.zip

大家在看

0132、单片机-485-PC串口通信proteus仿真+程序资料.zip

VBA加密工具,将DVB文件错位加密

WebServerApp

Cluster Load Balance Algorithm Simulation Based on Repast

Tibco Document

最新推荐

Vue实现textarea固定输入行数与添加下划线样式的思路详解

vue 监听屏幕高度的实例

vue删除html内容的标签样式实例

Vue 实现html中根据类型显示内容

vue实现全匹配搜索列表内容

实现Struts2+IBatis+Spring集成的快速教程

【数据融合技术】：甘肃土壤类型空间分析中的专业性应用

Waymo使用稀疏图卷积处理LiDAR点云，目标检测精度提升15%

Dwr实现无刷新分页功能的代码与数据库实例

【空间分布规律】：甘肃土壤类型与农业生产的关联性研究