javascript - Vaadin TextArea 将起始行号设置为 1

Question

我的问题与 this post 有关在“旧”Vaadin 论坛中。我想将 Vaadin TextArea 的初始行号设置为 1，因此它看起来像一个 TextField。

提到的帖子有解决方案:

This requires a bit of JavaScript to fix. You need to set rows=1 to the internal element

<textarea part="value"></textarea>

不幸的是我不知道如何应用这个解决方案，因为我仍然是一个 JS 和 CSS 初学者。我们已经有一些 JS 代码调整 TextAreas(和其他组件)，也许在这部分我需要添加一些代码？

const $_documentContainer = document.createElement('template');

$_documentContainer.innerHTML = `<dom-module id="our-project-text-area" theme-for="vaadin-text-area"> 
  <template> 
   <style> {            
      :host [part="input-field"] {
        font-weight: lighter;
      }
      
      :host [part="input-field"]::after {
        background-color: var(--mainColor);
      }
      
      :host([focused]:not([invalid])) [part="label"] {
        color: var(--mainColor);
      }
      }
    </style> 
  </template> 
 </dom-module>`;

document.head.appendChild($_documentContainer.content);

能否请您帮助我如何将属性添加到 TextAreas Shadow DOM 中的特定元素？

Answer 1

var textArea = new TextArea();
textArea.getElement().executeJs("this.shadowRoot.querySelector('textarea').rows = $0;", rows);

this指的是您使用 getElement() 选择的元素, 所以它将是 <vaadin-text-area> HTML 元素。

querySelector方法基本上是根据 CSS 选择器查找元素，在本例中我们要选择 <textarea>在阴影根内。您可以使用更具体的 CSS 或 [part='value'] 选择它。但自从rows属性是 textarea 标签固有的，我认为可以选择它。