Vaadin TextArea 将起始行号设置为 1

Question

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

提到的post有解决办法：

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

Answer 1

var textArea = new TextArea();
textArea.getElement().executeJs("this.shadowRoot.querySelector('textarea').rows = [=10=];", rows);

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

querySelector 方法基本上是根据 CSS select 或者，在这种情况下我们要 select 里面的 <textarea> 找到一个元素阴影根。您可以使用更具体的 CSS 或 [part='value'] select，但由于 rows 属性是 textarea 标签固有的，我认为可以选择那。

Vaadin TextArea 将起始行号设置为 1

Vaadin TextArea set starting row number to 1

javascript

vaadin

vaadin-flow