使用flex布局后 vxe-textarea 最小高度失效
时间: 2023-07-05 07:10:33 浏览: 71
在使用 flex 布局时,vxe-textarea 的最小高度可能会失效,这是因为 flex 布局会影响元素的高度计算。为了解决这个问题,可以将 vxe-textarea 的容器元素设置为 `flex-grow: 1`,并给 vxe-textarea 元素设置一个 `min-height` 属性,如下所示:
```html
<div style="display: flex; flex-direction: column; flex-grow: 1;">
<vxe-textarea style="min-height: 50px;"></vxe-textarea>
</div>
```
这样就能保证 vxe-textarea 的最小高度生效了。
相关问题
vxe-textarea最小高度
vxe-textarea 的最小高度可以通过设置 min-height 样式来实现,例如:
```
<vxe-textarea style="min-height: 50px;"></vxe-textarea>
```
这样,vxe-textarea 的最小高度就被设置为 50px。你也可以根据需要调整最小高度的数值。
vxe-textarea resize
`vxe-textarea` 是基于 `textarea` 元素封装的组件,如果要控制它的大小,可以通过设置组件的 `rows` 和 `cols` 属性来实现。例如:
```html
<vxe-textarea rows="5" cols="30"></vxe-textarea>
```
另外,如果希望 `vxe-textarea` 具有自动伸缩的功能,可以使用 CSS 的 `resize` 属性。例如:
```css
.vxe-textarea {
resize: both;
}
```
这样用户就可以通过拖动 `vxe-textarea` 右下角的边框来自由调整其大小。注意,`resize` 属性的兼容性并不完美,需要在不同浏览器中进行测试和调整。