Vue Element 输入框textarea设置autosize自适应高度出现滚动条解决方法

2023-03-30 23:15:12

Vue Element 中使用 Textarea 元素：深度指南

在 Vue Element 中，<textarea> 元素是一种功能强大的工具，可用于创建多行文本输入字段。通过 autosize 属性，您可以让文本区域根据其内容自动调整大小，无需手动设置高度。不过，这个属性也有一些限制，本文将深入探讨这些限制及其解决方法。

Autosize 属性

autosize 属性允许 <textarea> 元素自动调整其高度，以适应输入的文本。这意味着您不必手动设置 rows 属性来控制高度。以下示例演示了如何在 Vue Element 中使用 autosize：

<template>
  <textarea v-model="value" autosize></textarea>
</template>

<script>
export default {
  data() {
    return {
      value: ''
    }
  }
}
</script>

启用 autosize 后，文本区域将根据其内容动态调整大小。但是，需要注意的是，当 autosize 处于活动状态时，rows 属性将不起作用。

MinRows 和 MaxRows

虽然 autosize 允许自动调整大小，但您仍然可以通过设置 minRows 和 maxRows 来控制文本区域的最小和最大高度。以下示例演示了如何使用这些属性：

<template>
  <textarea v-model="value" autosize="{ minRows: 1, maxRows: 100 }"></textarea>
</template>

<script>
export default {
  data() {
    return {
      value: ''
    }
  }
}
</script>

此示例将确保文本区域的高度在 1 行和 100 行之间。

谷歌和 Edge 浏览器中的问题

在谷歌和 Edge 浏览器中使用 autosize 时，即使设置了 maxRows，您也可能会在输入少于最大行数时遇到滚动条。这是因为这些浏览器在计算文本区域高度时会考虑滚动条的高度。

解决方案：隐藏滚动条

为了解决这个问题，您可以添加一个新的 CSS 样式来隐藏滚动条：

.textarea-no-scrollbar {
  overflow: hidden;
}

然后，将其应用到文本区域：

<template>
  <textarea v-model="value" autosize="{ minRows: 1, maxRows: 100 }" class="textarea-no-scrollbar"></textarea>
</template>

<script>
export default {
  data() {
    return {
      value: ''
    }
  }
}
</script>