textarea设置宽高vue

### 如何在 Vue 中设置 `textarea` 的宽度和高度

#### 设置固定宽度和高度

对于固定的宽度和高度，在 Vue 组件中的 `<template>` 部分可以直接通过内联样式或 CSS 类来定义 `textarea` 的尺寸。

<template>
  <div>
    <!-- 使用内联样式 -->
    <textarea style="width: 300px; height: 150px;"></textarea>

    <!-- 或者使用CSS类 -->
    <textarea class="fixed-size"></textarea>
  </div>
</template>

<style scoped>
.fixed-size {
  width: 300px;
  height: 150px;
}
</style>

这种方式适用于不需要动态调整大小的情况[^2]。

#### 自适应高度

为了使 `textarea` 能够根据输入内容自动调整其高度，可以利用 Vue 提供的功能以及一些辅助函数。下面是一个基于提供的 `calcTextareaHeight` 函数的例子：

export default {
  data() {
    return {
      textAreaValue: ''
    }
  },
  methods: {
    calcTextareaHeight(targetElement, minRows = 1, maxRows = null) {
      let hiddenTextarea;

      if (!hiddenTextarea) {
        hiddenTextarea = document.createElement('textarea');
        document.body.appendChild(hiddenTextarea);
      }

      // 计算逻辑...
      
      return calculatedHeight;
    },

    handleInput(event) {
      const textarea = event.target;
      this.$nextTick(() => {
        textarea.style.height = 'auto';
        textarea.style.height = `${this.calcTextareaHeight(textarea)}px`;
      });
    }
  }
};

<textarea v-model="textAreaValue" @input="handleInput"></textarea>

此方法允许 `textarea` 根据用户输入的内容量自动增长或收缩，但不会超过设定的最大行数限制[^1]。

如果存在最大高度 (`maxHeight`) 并且滚动条的高度超过了这个值，则应停止增加 `textarea` 的高度并启用内部滚动条[^3]。

#### 动态控制宽度

需要注意的是，在某些情况下（比如 Ant Design Vue 表单组件），直接修改 `textarea` 的宽度可能不起作用。这时应该考虑将其放置在一个容器中并通过父级元素的布局属性间接影响它的宽窄变化；或者查阅所使用的UI库文档寻找特定于该框架的方法来定制化控件外观。