npm 包 @neoprospecta/angular-textarea-resize 使用教程

@neoprospecta/angular-textarea-resize 是一个可以让 textarea 自动适应内容高度的 Angular 组件。它基于 @neoprospecta/textarea-autosize 包进行封装，仅适用于 Angular 项目。

安装

使用 npm 进行安装：

npm install @neoprospecta/angular-textarea-resize

导入

在需要使用的模块中导入 TextareaResizeModule：

import { TextareaResizeModule } from '@neoprospecta/angular-textarea-resize';

@NgModule({
  imports: [TextareaResizeModule],
  ...
})
export class AppModule { }

使用

在需要使用的组件模板中，将 textarea 标签包裹在 textarea-resize 的标签中：

<textarea-resize>
  <textarea></textarea>
</textarea-resize>

配置

TextareaResizeComponent 组件可以接受以下配置项：

• minHeight：最小高度。默认值为 30。
• maxHeight：最大高度。默认值为 null，表示没有限制。
• debounceTime：延迟时间，单位为毫秒。默认值为 100。

可以通过设置 TextareaResizeService 的属性来进行全局配置：

import { TextareaResizeService } from '@neoprospecta/angular-textarea-resize';

constructor(private textareaResizeService: TextareaResizeService) {
  this.textareaResizeService.minHeight = 40;
}

另外，还可以通过给 TextareaResizeComponent 组件传递配置项来进行局部配置：

<textarea-resize [minHeight]="50" [maxHeight]="200" [debounceTime]="200">
  <textarea></textarea>
</textarea-resize>

示例代码

<textarea-resize [minHeight]="50" [maxHeight]="200" [debounceTime]="200">
  <textarea placeholder="请输入文本"></textarea>
</textarea-resize>

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055aee81e8991b448d895f