zoukankan      html  css  js  c++  java
  • angular5自适应窗口大小

    import {AfterViewInit, Directive, ElementRef, HostBinding, HostListener, Inject, Input, Renderer2} from '@angular/core';
    import {DOCUMENT} from '@angular/common';
    
    @Directive({
        selector: '[fixWindow]'
    })
    export class FixWindowDirective implements AfterViewInit {
        private bodyEl;
        @Input() marginBottom = 24;
        @Input() minWidth = 400;
        @HostBinding('style.height.px') height = 400;
    
        @HostListener('window:resize') onResize() {
            // 窗口自适应大小
            let height = this.bodyEl.getBoundingClientRect().height - this.el.nativeElement.getBoundingClientRect().top - this.marginBottom;
            if (height < this.minWidth) {
                height = this.minWidth;
            }
            this.height = height;
        }
    
        constructor(private el: ElementRef, private ren2: Renderer2, @Inject(DOCUMENT) private doc: Document) {
        }
    
        ngAfterViewInit() {
            this.bodyEl = this.doc.querySelector('body');
            // fix bug: Expression has changed after it was checked.
            setTimeout(() => this.onResize(), 500);
        }
    }
    
    
  • 相关阅读:
    uni-app-数据缓存
    uni-app-网络请求
    uni-app-上拉加载
    uni-app-下拉刷新
    uni-app-生命周期
    uni-app字体图标
    uni-app-样式
    [Python] ValueError: Unknown resampling filter
    [Python]列表复制以及切片[:][::]解析
    LeetCode 29. 两数相除
  • 原文地址:https://www.cnblogs.com/jecyhw/p/8308362.html
Copyright © 2011-2022 走看看