textarea autosize textarea 设置高度问题

项目中要做一个输入框的功能，右侧有按钮，同时输入框还要有最大的高度，超过高度要显示滚动条。应为用的是elementUI，所有就用了elementUI中的textarea组件来写这个功能。

然后在写的过程中发现，如果设置了autosize ，那么rows属性就失效了。后面就想着怎么处理才能达到需求。

一：element ui里的 textarea

element ui里的 textarea是多行文本输入，textarea有属性rows是可以来设置文本输入框的高度的。这是在没有设置autosize属性的时候。

autosize是用来设置行高，最多几行，超过了之后就会有滚动条出现，本来想着设置

autosize="{ minRows: 1, maxRows: 4}"来处理这里的高度问题，结果发现,minRows:1没有作用。

也就是说设置了autosize后，minRows默认就是2了， 而且textarea 默认的 rows也是为2，所以方法行不通

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

二：发现textarea的高度可以用padding来撑开

在调试了一些样式后，发现textarea的高度是可以用padding来撑开，于是就在浏览器中先调整需要撑开的高度，看看这种情况下光标是否也会居中。

后来发现这种做法是可以的，就采用了这种做法。

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

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

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

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

三：总结

完整的css代码

::v-deep .textareaInput {
    .el-textarea__inner{
      // padding: 14px 115px 14px 15px !important;
      line-height: 21px;
      padding: 15px 110px 15px 8px !important; // 只要改变这里的 padding 就可以影响到 textarea 的高度
      // padding-right: 115px !important;
      border-color: #394BAC;
    }
    ::placeholder{
      font-size: 12px;
      line-height: 20px;
    }
  }

这样这个功能就实现了，当时想着是怎么用属性控制高度，后来发现属性失效后就想着固定高度，但是固定高度不满足需求只能需要之前的方法，方法应该不是唯一，我这种只是我恰好满足了我的需求而已。