时间:2021-05-08
把Element UI里的textarea input设置为autosize之后,文本框的默认高度为33,并不符合设计
默认样式
在浏览器中查检元素,发现
高度是由textarea的height和min-height来控制框内文字的位置是由padding控制尝试
直接修改文本框的height和padding,看看能否起作用
在全局样式里添加:
$inputHeight: 38px;$inputFontSize: 16px;.el-textarea { textarea { padding: 8px; // 设置文本框的 padding height: $inputHeight; // 设置文本框的 height font-size: $inputFontSize; line-height: 21px; }}改过之后发现:
有意思的是,这个文本框的height是由行内样式所控制
面对这个问题,我做了两个尝试
!important
把height设置为!important,高度是变了,但它不能自动扩展了
-> 放弃
MyTextarea
自己写textarea组件,这样一来样式是可以随意改了,但要实现文本框随内容扩展的话还得写一堆 js ,成本有点高
-> 不优先使用
padding 决定了 height
在调试过程中发现,Element UI里的autosize textarea的初始高度是会随着padding的值变化
所以,我就在浏览器里调整padding的大小 ,直到它撑起来的高度和figma里要求的高度一致
然后把全局样式里的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 高度内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
element-ui中的select下拉列表如何设置默认值?在element-ui的运用中,涉及到了select下拉列表。项目中需要将select的默认值给展示
这是设置全部页面的textarea的宽度和高度。.textarea{height:100px;width:300px;} 这是设置指定的textarea的
vue使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知使用element-ui中的Notification,只有一
使用结合Element-UI的导航菜单:UI组件el-menu-item里的index写对应的组件名点击事件@select="handleSelect"首页关于
bug1.找不到element-ui/lib/theme-default/index.css解决:修改路径为element-ui/lib/theme-chalk