ViewUIPlus
ViewUIPlus copied to clipboard
[Bug Report]关于<Input type="textarea" :autosize="true" />组件中autosize配置为true,初始文本内容过多高度不自动适应bug
Environment
操作系统:windows/浏览器版本:127.0.6533.99(正式版本)(64位)/vue版本:3.4.27
Reproduction link
https://run.iviewui.com/PNnAb3uS
Steps to reproduce
如果初始化v-model绑定文本内容过多,渲染的文本框不会自适应高度,需要主动输入才会触发自适应高度
What is expected?
请修复这个bug,不然的话就要使用 :autosize="{minRows: x,maxRows: x}"这种了
What is actually happening?
实际结果渲染内容文本超出不自适应高度
@L-hailong 你好!我是一个可以帮助你解决bug,回答问题并成为贡献者的机器人。我在等待人类维护者的同时会为你提供帮助。😊
要修复 <Input type="textarea" :autosize="true" /> 组件在初始化时文本内容过多而高度不自动适应的问题,可以确保在组件初始化时正确调用 calcTextareaHeight 函数来计算高度。
以下是一个示例,展示了如何在 Vue 组件中使用 calcTextareaHeight 函数来调整文本区域的高度:
<template>
<textarea
ref="textarea"
v-model="content"
@input="resizeTextarea"
></textarea>
</template>
<script>
import calcTextareaHeight from 'path/to/calcTextareaHeight';
export default {
data() {
return {
content: 'Initial large amount of text content...',
};
},
mounted() {
this.resizeTextarea();
},
methods: {
resizeTextarea() {
const textarea = this.$refs.textarea;
const { height } = calcTextareaHeight(textarea);
textarea.style.height = height;
},
},
};
</script>
<style scoped>
textarea {
width: 100%;
box-sizing: border-box;
}
</style>
在这个示例中:
calcTextareaHeight函数被导入并在resizeTextarea方法中使用。resizeTextarea方法在input事件中调用,以便用户输入时动态调整高度。resizeTextarea方法也在mounted生命周期钩子中调用,以便在组件初始化时调整高度。
这样可以确保文本区域的高度在初始化和用户输入时都能根据内容正确调整 [1].
To continue talking to Dosu, mention @dosu.