textarea autosize textarea 设置高度问题

element ui里的 textarea  高度在没有设置autosize 的时候可以用属性 rows='x'来设置

如果设置了autosize 后,rows属性就失效了,本来想着用autosize="{ minRows: 1, maxRows: 4}",来设置高度应该是可以的,但是textarea  默认  rows='2',所以方法行不通

然后想着用textarea 的高度来限制,发现限制高度了autosize设置的就不起作用了。这个文本框的height是由行内样式所控制面对这个问题,

最后发现textarea的高度可以用padding来撑开,然后就在浏览器调整需要撑开的高度,这样光标也会居中的

    .el-textarea__inner{
      // padding: 14px 115px 14px 15px !important;
      line-height: 21px;
      padding: 10px 110px 10px 8px !important; // 只要改变这里的 padding 就可以影响到 textarea 的高度
    }

因为我右侧要预留出比较大的宽度来放按钮,我就测试了,发现了110px的大小比较适合我的宽度

设计还要求placeholder内容要居中然后就将placeholder设置line-height达到想要的高度就可以了。

  ::placeholder{
      font-size: 12px;
      line-height: 20px;
  }

至此所有的功能就实现了。

 

posted @ 2023-05-10 20:58  NicoleYe  阅读(2759)  评论(0)    收藏  举报