zdhxiong / mdui

Material Design 3(Material You) UI components using Web Components.
https://www.mdui.org
3.91k stars 356 forks source link

多行 TextField 高度自动填充 #313

Closed intzaaa closed 1 month ago

intzaaa commented 1 month ago

当前只能设置 TextField 的行数,但有时候需要直接设置 TextField 的高度。希望可以加入autofullheight属性,自动将行数设置为可以容纳的最大行数,可能的实现如下:

rows = Math.floor((parentHeight - padding - margin) / parseFloat(window.getCamputedStyle(textarea).lineHeight.replace("px", ""))) 
zdhxiong commented 1 month ago

autosize 属性

intzaaa commented 1 month ago

autosize可能存在局限性。第一,这个文本框一开始不是全高的,会随着用户的输入逐渐变高。第二,当textarea超过父元素的高度时,textarea会溢出,而不是停止变大;不仅如此,溢出以后就算设置overflow: scroll,每次在文本框中键入回车时都会回滚到顶部。

zdhxiong commented 1 month ago

下个版本可直接通过 <mdui-text-field style="height: 100%"> 设置文本框高度。