ionic3 textarea 自适应指令(实用、赞、改良版)

175 篇文章 1 订阅
139 篇文章 0 订阅

参考:https://blog.csdn.net/chelen_jak/article/details/103201459

解决问题:
       数据异步加载时无法实现TextArea的自动高度,只能通过输入时才会自动高度。 

解决方法:
       引用ngDoCheck事件代规input事件

具体代码:

import { Directive, HostListener, ElementRef, Input, DoCheck } from '@angular/core';

@Directive({
    selector: 'ion-textarea[autosize]' // Attribute selector
})
export class AutosizeDirective implements DoCheck {
    //@HostListener('input', ['$event.target'])
    //onInput(textArea: HTMLTextAreaElement): void {
    //    this.adjust();
    //}

    @Input('autosize') maxHeight: number;

    private ele: any;
    private oldValue: string = "";

    constructor(public element: ElementRef
    ) {
        //
    }

    ngOnInit(): void {
        setTimeout(() => {
            //必须放在setTimeout中才能有值
            this.ele = this.element.nativeElement.querySelector("textarea");
        }, 0);
    }

    ngDoCheck(): void {
        if (this.ele) {
            let newValue = this.ele.value || "";
            if (this.oldValue != newValue) {
                this.oldValue = newValue;
                this.adjust()
            }
        }
    }

    private adjust(): void {
        let ta = this.ele;
        let newHeight: number;

        ta.style.overflow = "hidden";
        ta.style.height = "auto";

        if (this.maxHeight) {
            newHeight = Math.min(ta.scrollHeight, this.maxHeight);
        }
        else {
            newHeight = ta.scrollHeight;
        }

        ta.style.height = newHeight + "px";
    }
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值