設置符號中的數字文本框寬度

Question

我們知道可以通過size屬性將輸入文本的寬度設置為符號數。

 1 <input type="text" size="1" value="123456789"><br/> 2 <input type="text" size="2" value="123456789"><br/> 3 <input type="text" size="3" value="123456789"><br/> 4 <input type="text" size="4" value="123456789"><br/>

這可能與劍道的 NumericTextbox （角度）

Answer 1

我認為您可以通過為具有size輸入kendo-numerictextbox創建一個新指令來覆蓋 size 屬性，其中類型是枚舉的劍道值或數字。 然后，如果 NumericTextBoxComponent 是枚舉的NumericTextBoxComponent值之一，則您可以設置它的大小 - 或者，如果它是數字，則設置本機元素的size屬性。

這是（未經測試的）代碼給你一個想法：

import { Directive, Input, OnChanges, SimpleChanges } from '@angular/core';
import { NumericTextBoxComponent } from '@progress/kendo-angular-inputs/main';

@Directive({
    selector: '[kendo-numerictextbox]'
})
export class SizeOverrideDirective implements OnChanges {

    @Input() customSize: 'small' | 'medium' | 'large' | 'none' | number;

    constructor(private numericTextBox: NumericTextBoxComponent) { }
                
    ngOnChanges(changes: SimpleChanges): void {
      if (!changes.customSize) {
          return;
      }

      if (changes.customSize.currentValue) {
          if (['small', 'medium', 'large', 'none'].includes(changes.customSize.currentValue)) {
            this.numericTextBox.size = changes.customSize.currentValue;
          } else {
            this.numericTextBox.numericInput.nativeElement.setAttribute('size', changes.customSize.currentValue);
          }
      } else if (!changes.customSize.firstChange) {
        this.numericTextBox.size = null;
        this.numericTextBox.numericInput.nativeElement.removeAttribute('size');
      }
  }

}