<el-input> textarea文本域显示滚动条(超过高度就自动显示)+ <el-input >不能正常输入,输入了也不能删除的问题

这篇具有很好参考价值的文章主要介绍了<el-input> textarea文本域显示滚动条(超过高度就自动显示)+ <el-input >不能正常输入,输入了也不能删除的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

<el-input> textarea文本域显示滚动条(超过高度就自动显示)+ <el-input >不能正常输入,输入了也不能删除的问题,vue.js,javascript,前端

需求:首先是给定高度,输入文本框要自适应这个高度。文本超出高度就会显示滚动条否则不显示。

<el-row class="textarea-row">
        <el-col :span="3" class="first-row-title">天气</el-col>
        <el-col :span="21" class="multi-rmk-col ">
          <el-form-item prop="weather">
            <el-input
              type="textarea"
              v-model="form.weather"
              style="height: 100%"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
.multi-rmk-col >>> .el-form-item__content,
.multi-rmk-col >>> .el-textarea__inner{
  height: 100% !important;
}
::-webkit-scrollbar {
  width: 6px; /*滚动条宽度*/
  height: 6px; /*滚动条高度*/
}
.multi-rmk-col >>>.el-textarea__inner::-webkit-scrollbar-thumb {
  background-color: rgba(168, 168, 168,.4);/*滚动条默认显示的颜色*/
}
 
.multi-rmk-col >>>.el-textarea__inner::-webkit-scrollbar {   
   width: 8px;   
   height: 8px;
   background-color: #4a4a4a;/*滚动条背景色显示的颜色*/
 }

参考文章

问题二:

加入这个,@input=“change($event)”

          <el-form-item prop="weather">
            <el-input
              type="textarea"
              v-model="form.weather"
              style="height: 100%"
              resize="none"
              @input="change($event)"
            ></el-input>
          </el-form-item>
methods: {
  change(){
    this.$forceUpdate();
  },

参考文献

参考文献(问题更全)文章来源地址https://www.toymoban.com/news/detail-728230.html

到了这里,关于<el-input> textarea文本域显示滚动条(超过高度就自动显示)+ <el-input >不能正常输入,输入了也不能删除的问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element ui 文本域el-textarea的计数限制不遮挡输入的文字

    在我们使用 element-ui 文本域的时候,有时可能会需要计算输入的文字的总长度的功能,此时我们可以使用 el-textarea 自带的 show-word-limit 属性,但是有一点不好的地方就是会遮挡住我们输入的文字,就像下面这样: 我们可以通过修改样式来解决这个问题:  

    2024年02月13日
    浏览(39)
  • Element-UI el-table高度不固定,自适应高度显示滚动条

    表格内容过多时显示滚动条:可通过 max-height设置一个固定的数值高度实现,但是项目中的需求是表格的高度不能写死,要自适应高度来显示滚动

    2024年02月11日
    浏览(59)
  • elementui el-input输入框金额显示 千分符与输入框 金额输入框 表格或列表中的金额输入框

    1、实现思路 当用户不对输入框进行任何处理时,将数值转成千分符形式,例如 12,345.67 格式,在用户点击金额进行输入修改操作的时候,显示的数值形式12345.67,并且用户在输入过程中禁止输入中文、英文、特殊符号、英文逗号等,只能输入数字、一位小数点、小数点后2位;

    2024年02月09日
    浏览(52)
  • el-input 指定宽度

    在使用 el-input 组件时,可以通过设置 style 或 class 属性来指定其宽度。 使用 style 属性设置宽度:

    2024年02月12日
    浏览(43)
  • 修改 el-input 内部样式

    在工作中有时候需要单独设置某个 el-input 组件的内部样式,比如 字体颜色、背景色、宽度、高度等,这时就需要修改 el-input 组件的内部自带样式,修改方式如下: el-input 独占满一整行 总结: 通过 /deep/ .el-input__inner 修改内部样式 通过给 el-input 组件加 class 属性,然后在cl

    2024年02月05日
    浏览(72)
  • 限制 el-input 输入 emoji

    快捷键 win+; 或 win+.

    2024年02月12日
    浏览(52)
  • vue el-input纯数字校验

    自我记录 踩坑 1和2 都不是很完美 3 和 4 原理就是使用正则输入的时候替换成空字符 oninput=\\\"value=value.replace(/D/g,\\\'\\\')\\\" 5 就是表单校验但只是提示用户 1.通过设置type属性: type=\\\"number\\\" ,会有样式问题(通过css也能干掉) 不建议使用 2.通过绑定值限制的方式: v-model.number=\\\"form.value\\\"

    2024年02月09日
    浏览(38)
  • el-input校验,只能输入正整数

    一、表单校验方式:  二、el-input的type设置为number,然后去掉上下箭头  

    2024年02月14日
    浏览(51)
  • el-input限制输入整数等分析

    input 限制输入在平时的需求比较常见,例如限制输入非数字,限制输入整数,限制输入的小数位数等等。这里分析下各种实现方式。 使用 type 属性为 number :将 el-input 的 type 属性设置为 number ,这将限制用户只能输入数字。然而,这种方式仍然允许输入小数。如果你希望只接

    2024年02月05日
    浏览(52)
  • el-input设置背景色,改变样式

    思路:在浏览器控制台的元素中发现el-input是两层,div里套了个input,直接在el-input中设置颜色的话无法达到效果,查看发现el-input__inner才是真正input的那层,设置一个class名称来定位到此,style样式中用了scoped,在css样式中加上deep和important 效果:  

    2024年02月16日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包