酷站(www.ku0.com)-致力于为互联网从业者提供动力!

热门关键词:  企业  as  baidu  c4rp3nt3r  美女
【ECS精选特惠】新用户上云低至1折起
百度资源

Element UI里的autosize textarea设置高度方法

来源:互联网搜集 作者:秩名 人气: 发布时间:2020-05-29
本篇文章主要介绍了Element UI里的autosize textarea设置高度方法,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

把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;
  }
}
 
 

改过之后发现:

  • padding 已经是新设置的大小了
  • height 并不是我设置的高度

有意思的是,这个文本框的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;
  }
}

版权声明:本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 959677720#qq.cn(#换@) 举报,一经查实,本站将立刻删除。

您可能感兴趣的文章:

原文链接:https://www.jb51.net/web/727926.html

相关文章

  • Element UI里的autosize textarea设置高度方法

    Element UI里的autosize textarea设置高度方法

    把Element UI里的textarea input设置为autosize之后,文本框的默认高度为33,并不符合设计 默认样式 在浏览器中查检元素,发现 高度是由textarea的height和min-height来控制框内文字的位置是由padding控制尝试 直接修改文本框的height和p......
    05-29
  • 详解XML中的标签与元素的如何使用

    详解XML中的标签与元素的如何使用

    本篇文章给大家介绍XML中的标签与元素的如何使用 标签 我们来了解一下 XML 最重要的部分之一,XML 标签。XML 标签是 XML 的基......
    08-21
  • 解析XML中的DTD文档类型定义

    解析XML中的DTD文档类型定义

    XML 文档类型定义,俗称 DTD,它是一种准确描述 XML 语言的方式。DTDs 根据适当 XML 语言的语法规则检查 XML 文档的词汇和结构的有效性。 XML DTD 可以指定在文档内部,也可以保存在独立的文档中然后单独链接。 XML教程 语法 DTD 的基本......
    04-27
  • XML编程中的模式定义XSD的详解

    XML编程中的模式定义XSD的详解

    XML 模式通常被称为 XML 模式定义(XSD)。它被用来描述和验证 XML 数据的结构和内容。XML 模式定义元素,属性和数据类型。模式元素也支持命名空间。它类似于描述数据库中数据的数据库模式。 语法 我们需要在 XML 文档中声明模式,如下所......
    04-26
  • 解析XML中的树形结构与DOM文档对象模型

    解析XML中的树形结构与DOM文档对象模型

    树结构 XML 文档始终是描述性的。树状结构通常被称为 XML 树,它在描述 XML 文档的过程中扮演一个重要的角色。 这个树结构包含根(父)元素,子元素等等。通过使用树状结构,我们可以了解源自根元素的所有后续分支和子分支。解析从根元素......
    04-16
  • 简单了解XML中的命名空间

    简单了解XML中的命名空间

    命名空间就是一组唯一名称。命名空间是确定哪个元素和属性名可以被分配到某个组的一种机制。命名空间通过 URI(统一资源标示符)识别。 命名空间声明 命名空间使用保留属性声明。这种属性名必须是 xmlns 或者以 xmlns: 开头。如下所示: ......
    04-04
  • 简介XML文档的阅读与编辑

    简介XML文档的阅读与编辑

    这篇文章主要介绍了XML文件的阅读与编辑,最常用的工具当然还是浏览器中的控制台与源代码查看,需要的朋友可以参考下 阅读器 以使用简单的文本编辑器或者任意浏览器查看 XML 文档。大多数主流浏览器都支持 XML。可以通过双击 XML 文档(如......
    04-03
  • 详解XML中的模式Schema

    详解XML中的模式Schema

    XML中拥有Schema特性,能够比DTD更加强大地引入元素结构,下面我们就来详解XML中的模式Schema的概念及作用和用法,需要的朋友可以参考下 文档定义模型为XML文档提供了规范,DTD的引入虽然解决了XML文档的规范化问题,但它文件格式类型和XML......
    04-03
  • 淘宝开了个引流通道 15秒抖出电商爆款

    淘宝开了个引流通道 15秒抖出电商爆款

    不知最近大家有没有被海底捞的抖音吃法刷屏,魔性的音乐节奏、风骚的DIY操作,让抖音一时间变成了舌尖上的抖音。 不知最近派友们有没有被海底捞的抖音吃法刷屏,魔性的音乐节奏、风骚的DIY操作,让抖音一时间变成了舌尖上的抖音。 但派代......
    03-23
  • 二手电商卖藏品鱼龙混杂,处处装傻让你维权无门

    二手电商卖藏品鱼龙混杂,处处装傻让你维权无门

    北京潘家园旧货市场 欢迎关注创事记的微信订阅号:sinachuangshiji 文/懂懂笔记 对于广大业余收藏爱好者来说,淘换宝贝是一种人生态度,更是一种生活乐趣。曾几何时,北京潘家园旧货市......
    02-27

最新更新