Angular 自定义指令(指令实现table表格列宽自由缩放)

你的名字 2023-06-27 06:17 7阅读 0赞

宿主元素：

自定义指令：

import { Directive, OnInit, ElementRef, HostListener, Input } from '@angular/core';
    
    @Directive({
      selector: '[appTable]'
    })
    export class TableDirective implements OnInit {
    
      @Input('appTable') tableColor: string;
      @Input() bgcolor: string;
    
      // 构造函数中使用 ElementRef 来注入宿主 DOM 元素的引用
      constructor(private element: ElementRef) {
      }
    
      ngOnInit(): void {
        console.log('tableColor', this.tableColor);
        console.log('bgcolor', this.bgcolor);
      }
    
      // 监听宿主元素mousedown事件
      @HostListener('mousedown') onMouseDown() {
        // ElementRef通过其 nativeElement 属性,提供直接访问宿主 DOM 元素的能力
        this.element.nativeElement.style.backgroundColor = this.tableColor;
      }
    }

好，现在实现用指令例使table表格列宽自由缩放，效果图：

![20200104182609295.gif][]

**resize-horizontal.svg**

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1578113773228" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3620" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css">@font-face { font-family: uc-nexus-iconfont; src: url("chrome-extension://pogijhnlcfmcppgimcaccdkmbedjkmhi/res/font_9qmmi8b8jsxxbt9.woff") format("woff"), url("chrome-extension://pogijhnlcfmcppgimcaccdkmbedjkmhi/res/font_9qmmi8b8jsxxbt9.ttf") format("truetype"); }
    </style></defs><path d="M704 360.533333l140.8 130.133334c4.266667 6.4 8.533333 12.8 8.533333 19.2s-2.133333 14.933333-8.533333 19.2l-140.8 130.133333c-6.4 6.4-10.666667 8.533333-14.933333 6.4-4.266667-2.133333-6.4-6.4-6.4-14.933333v-85.333334h-341.333334v85.333334c0 8.533333-2.133333 12.8-6.4 14.933333-4.266667 2.133333-8.533333 0-14.933333-6.4l-140.8-130.133333c-4.266667-6.4-8.533333-12.8-8.533333-19.2s2.133333-14.933333 8.533333-19.2l140.8-130.133334c6.4-6.4 10.666667-8.533333 14.933333-6.4 4.266667 2.133333 6.4 6.4 6.4 14.933334v85.333333h341.333334v-85.333333c0-8.533333 2.133333-12.8 6.4-14.933334 4.266667 0 8.533333 2.133333 14.933333 6.4z" p-id="3621"></path></svg>

**app.component.html**

**table.directive.ts**

import { Directive, OnInit, ElementRef, HostListener } from '@angular/core';
    import { EventManager } from '@angular/platform-browser';
    
    @Directive({
      selector: '[appTable]'
    })
    export class TableDirective implements OnInit {
      // resize-horizontal.svg拖动图标的mousedown事件是否执行
      down: boolean = false;
      // 宿主元素的初始宽度
      thWidth: any;
      // table元素的初始宽度
      tableWidth: any;
      // table对象
      table: any;
      // 拖动图标的mousedown事件执行时的鼠标x轴位置
      mousex: any;
    
      constructor(private el: ElementRef, private eventManager: EventManager) {
      }
    
      ngOnInit(): void {
        this.thWidth = this.el.nativeElement.offsetWidth;
        this.table = document.querySelector('#table') as HTMLElement;
        this.tableWidth = this.table.offsetWidth;
    
        const content = document.createElement('span');
        content.style.background = 'url("./assets/images/resize-horizontal.svg") center center no-repeat';
        content.style.width = '27px';
        content.style.height = '25px';
        content.style.position = 'absolute';
        content.style.right = '4px';
        content.style.top = '0';
        content.onmousedown = (event: any) => {
          this.mouseDown(event);
        };
        this.el.nativeElement.style.position = 'relative';
        this.el.nativeElement.appendChild(content);
    
        this.eventManager.addGlobalEventListener('window', 'mousemove', (event: any) => {
          if (this.down && event.screenX > this.mousex) {
            this.el.nativeElement.style.width = this.thWidth + event.screenX - this.mousex;
            this.table.style.width = this.tableWidth + event.screenX - this.mousex;
          }
        });
        this.eventManager.addGlobalEventListener('window', 'mousedown', (event: any) => {
          if (this.down) {
            this.mousex = event.screenX;
          }
        });
      }
    
      private mouseDown(event: any) {
        this.down = true;
      }
    
      @HostListener('document:mouseup', ['$event.target'])
      private mouseUp(event: any) {
        this.down = false;
      }
    }

[20200104182609295.gif]: https://img-blog.csdnimg.cn/20200104182609295.gif