element ui textarea文本域显示滚动条

这篇具有很好参考价值的文章主要介绍了element ui textarea文本域显示滚动条。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

测试报的一个小bug,在这做个记录

效果图:

加之前:鼠标放上去才会显示

element ui textarea文本域显示滚动条

 加之后:超过直接显示出来

element ui textarea文本域显示滚动条

 代码:文章来源地址https://www.toymoban.com/news/detail-504626.html

 <el-input
    type="textarea"
    v-model="ruleForm.explain"
    :autosize="{ minRows: 2, maxRows: 8 }"
    maxlength="1024"
    placeholder="说明"
 ></el-input>
::-webkit-scrollbar {
  width: 8px; /*滚动条宽度*/
  height: 8px; /*滚动条高度*/
}
.el-textarea__inner::-webkit-scrollbar-thumb {
  background-color: rgba(168, 168, 168,.4);/*滚动条默认显示的颜色*/
}

.el-textarea__inner::-webkit-scrollbar {   
   width: 8px;   
   height: 8px;
   background-color: white;/*滚动条背景色显示的颜色*/
 }

到了这里,关于element ui textarea文本域显示滚动条的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 微信小程序 - <textarea> 多行文本输入框 placeholder 属性换行显示文字(适用于 vant-weapp 的 Field 输入框文本域组件 van-field)样式修改的详细教程

    网上大部分教程都无法解决,本文提供最新最好的解决方案。 帮助您将 textarea 多行文本框的 placeholder 文字描述换(断)行处理, 提供详细的运行示例,代码干净整洁, 如下图所示,您只需要复制粘贴几秒钟就可以实现该功能: 建议您使用一键复制功能,避免漏选。 随便找

    2024年02月12日
    浏览(50)
  • element ui,table设置fixed表格错位,滚动条无法显示问题

    fixed设置了left和right表格固定列错位,滚动条无法显示问题通过设置样式解决 1、固定列错行问题修改  /deep/ .w-table__fixed-body-wrapper{   top: 80px !important; } /deep/ .w-table__fixed{        bottom: 12px !important;        box-shadow:none;   } 2、滚动条无法显示问题 /deep/ .w-table__fixed-right { // 右

    2024年04月23日
    浏览(38)
  • element-ui el-scrollbar滚动条初始化不显示

    当使用el-scrollbar的时候,比如你的数据列表是后端获取的,这时候,初始化的时候,因为数据还没有获取到,导致里面的内容没有撑开,所以滚动条是不显示的,但是可以正常滚动。 解决方法: 获取左侧菜单的数据时, div style=\\\" height: calc(100vh - 120px);over-flow:hidden\\\"     el-sc

    2024年02月09日
    浏览(52)
  • Vue3文本域(Textarea)

    参数 说明 类型 默认值 必传 width 文本域宽度 string | number ‘100%’ false allowClear 可以点击清除图标删除内容 boolean false false autoSize 自适应内容高度 boolean | {minRows?: number, maxRows?: number} false false disabled 是否禁用 boolean false false maxlength 最大长度 number undefined false showCount 是否展示字

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

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

    2024年02月11日
    浏览(58)
  • vue中数据滚动显示 实现Element-UI中el-table内数据的懒加载

    工作中我们经常会用到element-ui组件库中的le-table组件来展示数据,但当table的数据源数量过大的时候统一展示可能会出现页面卡顿,且会影响用户体验,为此我们可以尝试对el-table中的数据做懒加载的效果展示: 1. 挂在阶段监听el-table的scroll滚动事件 2. 当table表格滚动条的位置

    2023年04月08日
    浏览(55)
  • Vue + Element UI 实现文本超出长度显示省略号,鼠标移上悬浮展示全部内容的方法

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。 在 Vue 项目中,经常需要处理文本内容过长的情况。本文将介绍如何使用 Vue 和 Element UI 实现文本超出长度时显示

    2024年02月09日
    浏览(56)
  • element ui 的滚动条,Element UI 文档中没有被提到的滚动条

    element ui 的滚动条,Element UI 文档中被提到的滚动条 Element UI 官网中有用到自定义的滚动条组件,但是发布的所有版本中都不曾提及,个中原因我们不得而知,不过我们还是可以拿过来引用到自己的项目中。  使用的时候, 放在 el-scrollbar/el-scrollbar 标签内即可 如: 发现底部出

    2024年02月05日
    浏览(39)
  • textarea输入框的内容如何原模原样的展示出来?(适用于一些antd design框架以及element ui框架)

    笔者在工作的时候遇到了一个问题,在写一个新建页面的需求的时候,遇到一个问题:新建页面的文本框里用户输入的内容格式,前端要返回这些数据给后端,后端又不想做空格以及换行的判断处理,,所以后端在返回给前端的数据其实是一大串没有格式的字符串,但是又要

    2024年02月12日
    浏览(41)
  • 使用element-ui的滚动条

    在项目中引入element-ui后,发现在不同的浏览器显示并不一样,为了统一浏览器中的样式,统一使用了element-ui库中的滚动条。使用方法如下: 1.把想要出滚动条的内容放在下边标签里即可: 2.如果不想要横向的滚动条,添加css: 3.如果相让滚动条一直显示而不是鼠标移入才显

    2024年02月15日
    浏览(44)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包