Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
L-hailong opened this issue Aug 11, 2024 · 1 comment
Labels
Bug Something isn't working

Comments

@L-hailong
Copy link

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?

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

Copy link

dosubot bot commented Aug 11, 2024

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

@dosubot dosubot bot added the Bug Something isn't working label Aug 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant