element-ui el-input textarea设置autosize后，当textarea有初始内容，并且初始内容小于2行时会出现滚动条

最新推荐文章于 2024-04-18 15:43:07 发布
最新推荐文章于 2024-04-18 15:43:07 发布
阅读量1w 收藏 2
点赞数 1
分类专栏： 问题 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xcdsdf14545/article/details/106043808
版权

问题截图

猜测问题原因可能是我之前修改了字体大小，导致和elementui默认设置的大小无法对应导致的。

elementui默认为textarea设置的最小高度是30px

解决办法是

main.js中引入全局样式，在全局样式中设置textarea的最小高度为40px

注：设置autosize后row是无法生效的

路过乌云
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue3+ElementPlus el-input textarea类型 label垂直居中
朝花夕拾的博客
06-06 1117
【代码】Vue3+ElementPlus el-input textarea类型 label垂直居中。
一些问题——滚动条样式设置+elementUI中一些内部样式修改
weixin_58412143的博客
03-31 2003
::-webkit-scrollbar { width: 10px; /* 纵向滚动条*/ height: 5px; /* 横向滚动条 */ background-color: #fff; } /*定义滚动条轨道 内阴影*/ ::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0, 0, 0, 0); background-color: #ccc; } //下面是ul的滑动条 /*定义滑块 内阴影.
textarea自适应高度二——（设置隐藏div获取高度和仿element-ui组件）
weixin_44784401的博客
07-07 4298
textarea自适应高度二——（设置隐藏div获取高度和仿element-ui组件）
使用elementplus实现文本框的粘贴复制
lanmy_dl的博客
08-02 1594
文本框仅用于显示展示数据并且用户可以进行复制，并不会进行修改和编辑，
el-input在type=“textarea“中文字换行，导出成word文档中也显示换行
最新发布
devil的博客
04-18 311
el-input在type="textarea"文字中换行，是\n转义的，文字导出成word文档没有换行，只需要把\n替换成\r，这样el-input和word文档都能正常显示换行。
element如何实现input输入与下拉滚动加载效果
baidu_41601048的博客
09-27 1283
需求如图： 第一个想到的是利用input的自定义模板+远程搜索来实现。也就是借助这个组件： <el-autocomplete></el-autocomplete>但发现在做滚动加载的时候不好实现。后来把目标瞄向了select组件。看到网上有实例，通过一个一个自定义指令判断是否滚动到顶部。然后再做加载。经过尝试发现可以解决问题： step1： 写一个自定义指令：（我的实例中该自定义指令放在main.js同级目录下）directives.js import Vue fr.
如何为 Element UI 里的 autosize textarea 设置高度
11-20
把Element UI里的textarea input设置为autosize之后，文本框的默认高度为33，并不符合设计 默认样式 在浏览器中查检元素，发现 高度是由textarea的height和min-height来控制框内文字的位置是由padding控制尝试 直接...
textarea-autosize:自动将textarea调整为其内容的大小
05-05
Textarea自动调整大小自动将textarea调整为其内容的大小... import { observe } from 'selector-observer'import autosize from '@github/textarea-autosize'observe ( 'textarea.autosize' , { subscribe : autosize }
textarea去掉滚动条 textarea横向或纵向滚动条的去掉方法
12-13
在IE下文本框textarea会显示滚动条（如下：） 去掉textarea横向或纵向滚动条办法： <textarea style="overflow:hidden"></textarea> 可以通过overflow-x:hidden和overflow-y:hidden控制横向和纵向滚动条...
react-textarea-autosize： 随着内容增长的React组件
02-05
react-textarea-autosize 替代textarea组件，可随着内容的更改自动调整textarea的大小。 流行的本机React版本！ 重约1.3KB （缩小并压缩）。 此模块支持IE9及更高版本。 import TextareaAutosize from 'react-...
html滚动条 textarea属性设置
12-14
1．overflow内容溢出时的设置（设定被设定对象是否显示滚动条） overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置 以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。 2．...
vue element 输入框textarea设置autosize自适应高度出现滚动条问题
A2258908698的博客
10-25 854
【代码】vue element 输入框textarea设置autosize自适应高度出现滚动条问题。
elementUI的textarea设置大小
诚的博客
08-14 6901
<el-form-item label="活动形式"> <el-input type="textarea" :rows="2" v-model="form.desc"></el-input> </el-form-item> <el-col style="width: 200px"> <el-input type="textarea" .
element ui textarea实现输入字数统计
字节叔叔
09-07 2638
最近看同行设计，input textarea如果限制字符，可以展示已输入多少个字符，总共限制多少个字符。觉得这个设计挺好，看了一下element官方文档，也可以这么实现。
设置textarea不可拖动
热门推荐
candy_tity的博客
11-07 3万+
默认情况下，我们将鼠标移动到textarea的右下角时发现文本域是可以通过拖动的方式改变其大小的，这会影响我们原本的页面布局。 若想设置其不可拖动，可为其添加如下属性：<textarea style="resize:none;"></textarea>
Element设置＜el-input＞的高度
newbaby123的博客
12-29 1万+
今天在完成分配的任务的时候遇到了一点小麻烦，需要把一个Input输入框给设置成这样 直接来到style里直接 .el-input{ width:90%; height:50px; } 本以为轻轻松松就解决了，结果设置的height完全不起作用，后来通过查资料，看element的官方文档才发现，要设置<el-input>的高度，需要使用 rows属性 官方文档是这样说的，rows可以设置行数，但是必须设置 input的 type属性为 type="textares
[工作困难]element-plus封装多个子组件表单校验,并数据合并发送
Duan_hs的博客
01-03 642
众所周知,一些在页面中重复的DOM元素要使其进行组件封装,并且封装组件的数据要发送到服务端。②并设置输入事件将输入的数据赋值给定义的变量,并发送其父组件接收。①在components文件下下创建一个组件。今日遇到这个困难,因此在这里总结一下。③在父组件中设置校验表单。这样就可以坐到表单校验!
el-input type=‘textarea’后高度设置
我的代码没有bug的博客
07-15 1万+
通过设置 autosize 属性可以使得文本域的高度能够根据文本内容自动进行调整，并且 autosize 还可以设定为一个对象，指定最小行数和最大行数。 关键代码：:autosize="{ minRows: 5, maxRows: 5}" <el-input type="textarea" :maxlength="500" :autosize="{ minRows: 5, maxRows: 5}"></el-input> ...
ElementUI-textarea文本域高度自适应设置的方法
yangwq的博客
02-05 9909
<el-form ref="createForm" :model="createForm" :rules="newRules" label-width="100px" label-position="left" size="mini"> <el-form-item label="描述" prop="desc"> <!-- <el-inp...
el-input使用textarea后回显出现空白但是一输入内容就恢复正常
03-29
这可能是因为el-input的默认行高和textarea的行高不同所导致的。当el-input使用textarea时，它会将textarea的高度设置为与el-input相同，但是默认的行高可能会导致一些空白出现。当你开始输入内容时，el-input会自动调整textarea的行高，从而消除空白。 要解决这个问题，你可以尝试在el-input中设置行高，以使其与textarea一致。例如： ``` <el-input type="textarea" :rows="3" :style="{ lineHeight: 'normal' }" ></el-input> ``` 在这个例子中，我们将行高设置为“normal”，这将使它与textarea的默认行高一致。你还可以尝试其他值来找到最适合你的样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值