vue3 写一个可以自动换行的文本框 每次换行高度会自动变化
时间: 2024-09-18 13:18:39 浏览: 31
在 Vue3 中,你可以使用 `v-model` 和 `textarea` 标签结合自定义指令来创建一个可以自动换行并适应内容高度的文本框。这里需要利用虚拟滚动技术和计算属性来动态调整高度。下面是一个简单的示例:
```html
<template>
<div ref="textAreaWrapper">
<textarea v-model="inputText" @input="onInput" :rows="getRows()" :style="{ height: 'auto', overflow: 'scroll' }"></textarea>
</div>
</template>
<script>
export default {
data() {
return {
inputText: "",
};
},
methods: {
onInput(e) {
// 防止无限循环
if (this.$refs.textAreaWrapper.scrollHeight <= this.$refs.textAreaWrapper.clientHeight) {
return;
}
this.getRows(); // 更新行数
},
getRows() {
const lines = this.inputText.split("\n");
const lineHeight = parseFloat(window.getComputedStyle(this.$refs.textAreaWrapper, null).lineHeight); // 获取行高
this.$set(this, "rows", Math.ceil(lines.length / lineHeight)); // 动态设置行数
},
},
};
</script>
```
在这个例子中,`ref` 被用于获取 textarea 的 DOM 元素,然后在输入事件 `@input` 中,我们检查是否需要增加行数。`getRows` 方法通过计算输入的文本行数和行高来更新 `rows` 数据,这将直接影响 textarea 的高度。