view-design / ViewUIPlus

An enterprise-level UI component library and front-end solution based on Vue.js 3
https://www.iviewui.com
Other
384 stars 133 forks source link

[Bug Report]关于<Input type="textarea" :autosize="true" />组件中autosize配置为true,初始文本内容过多高度不自动适应bug #384

Open L-hailong opened 3 months ago

L-hailong commented 3 months ago

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?

实际结果渲染内容文本超出不自适应高度

dosubot[bot] commented 3 months ago

@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>

在这个示例中:

  1. calcTextareaHeight 函数被导入并在 resizeTextarea 方法中使用。
  2. resizeTextarea 方法在 input 事件中调用,以便用户输入时动态调整高度。
  3. resizeTextarea 方法也在 mounted 生命周期钩子中调用,以便在组件初始化时调整高度。

这样可以确保文本区域的高度在初始化和用户输入时都能根据内容正确调整 [1].

To continue talking to Dosu, mention @dosu.