Vaadin TextArea 将起始行号设置为 1

问题描述

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

提到的帖子有解决方案：

这需要一些 JavaScript 来修复。您需要将 rows=1 设置为内部元素

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

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

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 中的特定元素添加属性吗？

解决方法

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

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

querySelector 方法基本上基于 CSS 选择器查找元素，在这种情况下，我们要选择阴影根中的 <textarea>。您可以使用更具体的 CSS 或 {{1}} 来选择它，但由于 [part='value'] 属性是 textarea 标签固有的，我认为可以选择它。

javascript vaadin vaadin-flow