前言
在前端开发中，文本域是一个常见的组件。当用户输入一段较长的文字时，我们希望能够自动地将文本框的大小调整以适应输入的内容。在传统的 HTML 中，我们需要写一些 JavaScript 代码来实现这个效果。然而，在现代前端框架中，有很多已经被封装好的组件库可以直接使用。本文将介绍 npm 包 @polymer/iron-autogrow-textarea 的使用方法。
安装
@polymer/iron-autogrow-textarea 是一个由 Polymer 维护的 npm 包，可以用 npm 安装。在命令行中输入以下命令即可：
npm install --save @polymer/iron-autogrow-textarea
使用方法
引入组件
在你的代码中，需要引入 @polymer/iron-autogrow-textarea 这个组件。你可以使用以下的代码来完成引入：
<link rel="import" href="/node_modules/@polymer/iron-autogrow-textarea/iron-autogrow-textarea.html">
使用组件
引入组件后，需要在 HTML 中使用 iron-autogrow-textarea 标签。以下是一个基本的示例：
<iron-autogrow-textarea></iron-autogrow-textarea>
这是一个最基本的 iron-autogrow-textarea 示例。但是它并没有什么用处。
设置定宽和定高
你可以设置 iron-autogrow-textarea 的宽和高。以下是一个示例：
<iron-autogrow-textarea style="width: 300px; height: 100px;"></iron-autogrow-textarea>
在这个示例中，我们设置了 iron-autogrow-textarea 的宽为 300px，高为 100px。
绑定数据源
在实际开发中，我们通常需要将 iron-autogrow-textarea 的值与一个数据源绑定起来。你可以使用以下的代码来完成绑定：
<iron-autogrow-textarea value="{{myValue}}"></iron-autogrow-textarea>在这个示例中，我们将 iron-autogrow-textarea 的值绑定到了 myValue 这个数据源上。
响应输入事件
iron-autogrow-textarea 组件还提供了 on-iron-autogrow-textarea-resize 事件。你可以通过这个事件来监听 iron-autogrow-textarea 的大小变化。以下是一个示例：
<iron-autogrow-textarea on-iron-autogrow-textarea-resize="onResize"></iron-autogrow-textarea>
在这个示例中，我们将 on-iron-autogrow-textarea-resize 事件绑定到了一个叫做 onResize 的函数上。
function onResize() {
console.log('Resized!');
}在这个示例中，当 iron-autogrow-textarea 的大小发生变化时，onResize 函数将会被调用，并且会在控制台中输出 Resized!。
总结
通过本文，你了解了如何使用 @polymer/iron-autogrow-textarea 这个 npm 包来实现自动调整大小的文本框。你学习了如何引入组件、设置宽高、绑定数据源，以及响应输入事件。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f75695da9b7065299ccbcc1