这指令不是我发明的,国外看到的,找个地方记录一下。关于指令的一些简单说明,可以看我这篇文章:【开发指南】(五)ionic3应该善用组件和指令。
假如对指令有所了解了,那首先创建一个指令:
ionic g directive autosize
打开文件编辑:
import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: '[autosize]' // Attribute selector
})
export class AutosizeDirective {
@HostListener('input', ['$event.target'])
onInput(textArea:HTMLTextAreaElement):void {
this.adjust();
}
constructor(public element:ElementRef) {
console.log('Hello AutosizeDirective Directive');
}
ngOnInit():void {
setTimeout(() => this.adjust(), 0);
}
adjust():void {
const textArea = this.element.nativeElement.getElementsByTagName('textarea')[0];
textArea.style.overflow = 'hidden';
textArea.style.height = 'auto';
textArea.style.height = textArea.scrollHeight + 'px';
}
}
然后随便找个html页面,加上下面这些内容测试看下效果,效果图我就不上了:
<ion-item>
<ion-textarea name="dummyText" [(ngModel)]="dummyText" autosize></ion-textarea>
</ion-item>
原理就是监听input事件,每次输入后执行
adjust
方法调整样式。