怎样为 Element UI 里的 autosize textarea 设定高宽比

把Element UI里的textarea input设定为autosize以后,文字框的默认设置高宽比为33,其实不合乎设计方案

默认设置款式

在访问器中查检元素,发现

高宽比是由textareaheightmin-height来操纵框内文本的部位是由padding操纵尝试

立即改动文字框的heightpadding,看看能否起功效

全局性款式里加上:

$inputHeight: 38px;
$inputFontSize: 16px;

.el-textarea {
  textarea {
    padding: 8px; // 设定文字框的 padding
    height: $inputHeight; // 设定文字框的 height
    font-size: $inputFontSize;
    line-height: 21px;
  }
}

改了以后发现:

  • padding 早已是新设定的尺寸了
  • height 其实不是我设定的高宽比

成心思的是,这个文字框的height是由行内款式所操纵

应对这个难题,我做了两个尝试

!important

height设定为!important,高宽比是变了,但它不可以全自动拓展了

-> 舍弃

MyTextarea

自身写textarea组件,这样1来款式是能够随便改了,但要完成文字框随內容拓展的话还得写1堆 js ,成本费有点高

-> 不优先选择应用

padding 决策了 height

在调节全过程中发现,Element UI里的autosize textarea的原始高宽比是会伴随着padding的值转变

因此,我就在访问器里调剂padding的尺寸 ,直至它撑起来的高宽比和figma里规定的高宽比1致

随后把全局性款式里的padding改为对应的值

$inputFontSize: 16px;

.el-textarea {
  textarea {
    padding: 7.5px 0 7.5px 8px; // 要是更改这里的 padding 便可以危害到 textarea 的高宽比
    font-size: $inputFontSize;
    line-height: 21px;
  }
}

总结

到此这篇有关怎样为 Element UI 里的 autosize textarea 设定高宽比的文章内容就详细介绍到这了,更多有关Element UI autosize textarea 高宽比內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!