通用方案px2rem 处理 内联样式、element-ui表头折行、label折行、表单项换行异常

这篇具有很好参考价值的文章主要介绍了通用方案px2rem 处理 内联样式、element-ui表头折行、label折行、表单项换行异常。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

通用方案-处理element-ui 表单项label折行、换行异常,表头折行问题

  • 背景简介:在实际的生产环境中,客户用到的屏幕大大小小分辨率各有异同,但是为了布局的统一和美观,我们采用了postcss-px2rem插件对element-ui进行响应式适配处理,大部分问题得到了解决,但仍有一些细枝末节,比如标题中所提到的情况。
    label-width="100px"为例,这种在element-ui编译时会处理成内联样式,但是postcss-px2rem插件并没有处理内联样式的功能,于是我们便需要对之自行处理。
    • 在main.js中全局挂载方法,将px转换成rem
      // 处理element-ui内联样式px2rem,全局挂载
      function px2rem(px) {
        if (/%/gi.test(px)) {
          // 有百分号%,特殊处理,表述pc是一个有百分号的数,比如:90%
          return px; 
        } else {
          return parseFloat(px) / 192 + 'rem';
        }
      }
      Vue.prototype.$px2rem = px2rem; // 放到全局
      
    • 修改表单对应项属性
      <!-- 修改内容 label-width -->
      <el-form class="formCheckSec"
        label-width="100px" 
        label-position="left"
        ref="form"
        :rules="formRules"
        :model="selectForm">
      </el-form>
      
      <el-form class="formCheckSec"
        :label-width="$px2rem('100px')"
        label-position="left"
        ref="form"
        :rules="formRules"
        :model="selectForm">
      </el-form>
      
  • 情形二:换行异常: 在表单项(既顶部筛选或表单提交选项)中,我们采用栅格布局。如果一行内,最后一项表单项为日期组件,则会导致第二行布局错乱,表现为不从头排列,前面空一些内容,如下图所示。
    通用方案px2rem 处理 内联样式、element-ui表头折行、label折行、表单项换行异常

此时我们则需要在换行异常的表单项后添加下述代码,以上图为例,我们则需要在’生效日期’表单项后添加对应代码文章来源地址https://www.toymoban.com/news/detail-481976.html

<el-col :span="12">
   <el-form-item label="生效日期" required>
     <el-row :gutter="0" class="y_date_row">
       <div class="y_date_range">
         <el-col :span="11">
           <!-- 省略... -->
         </el-col>
         <el-col :span="2"></el-col>
         <el-col :span="11">
           <!-- 省略... -->
         </el-col>
       </div>
     </el-row>
   </el-form-item>
 </el-col>
 <!-- 在此处添加代码即可 -->
 <el-row></el-row>
 <el-col :span="6">
   <el-form-item label="币种" prop="ddCurrencyKind">
     <!-- 省略... -->
   </el-form-item>
 </el-col>
  • 情形三:表头折行: 需依次调整并固定规范
    • 比如 四字120 六字160… 依此类推
    <el-table-column
        prop="feeKindName"
        label="费用种类"
        width="120"
        align="center"
    >
    </el-table-column>
    <el-table-column
        prop="startTime"
        label="生效开始时间"
        align="center"
        width="160"
    >
    </el-table-column>
    

到了这里,关于通用方案px2rem 处理 内联样式、element-ui表头折行、label折行、表单项换行异常的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 【CSS】 vh、rem 和 px 的区别

    vh、rem 和 px 都是 CSS 中常见的长度单位,它们有以下区别: px(像素)是一个绝对单位,表示屏幕上的实际像素点。它的大小不会根据设备或浏览器的设置进行调整,是一个固定值。 rem(根元素字体大小的倍数)是一个相对单位,相对于根元素(通常是 html 元素)的字体大小

    2024年02月15日
    浏览(46)
  • 一文搞懂:viewpoint与rem、百分比、px

    ​一个表总结: 名称 定义 使用示例 viewpoint 是指用户在网页上实际可见和可交互的区域,通常指的是浏览器窗口或移动设备的屏幕尺寸。 width:100vw;height:100vh rem (root em)是相对于根元素(通常是 html 元素)的字体大小来计算的单位。 width:100rem;height:100rem 百分比 是

    2024年03月19日
    浏览(51)
  • Vue中使px自动转rem配置 (h5适配问题)

    以下方法为px自动转换rem,顾名思义,配置完成后,不用再关心rem换算等等,只需按照设计稿的px值写入即可,当你保存后 PostCSS 插件会自动将px转换成所配置的rem值,并且你在浏览控制台观测界面时你会发现你在代码里写的是px单位,在控制台被转换成了rem单位。 postcss 一种

    2024年01月22日
    浏览(73)
  • css面试题:px、em、rem、vw、vh的区别

    pixel,px,表示像素,也就是显示器上一个个的小点,每个像素点都是大小一样的,所以像素被分到了绝对长长度单位中。 有人把px当作相对单位,是相对于 观看设备 的。对于 低 dpi/ppi(像素密度) 的设备,1px 是显示器的一个设备像素(点)。对于打印机和高分辨率屏幕,

    2024年02月12日
    浏览(43)
  • css基础知识三:说说em/px/rem/vh/vw的区别?

    一、介绍 传统的项目开发中,我们只会用到px、%、em这几个单位,它可以适用于大部分的项目开发,且拥有比较良好的兼容性 从CSS3开始,浏览器对计量单位的支持又提升到了另外一个境界,新增了rem、vh、vw、vm等一些新的计量单位 利用这些新的单位开发出比较良好的响应式

    2024年02月09日
    浏览(51)
  • CSS查缺补漏之常用长度单位(px、em、rem、%、vw/vh、vmin/vmax)

    此文内容较少,轻轻松松掌握,莫要有压力~ 正如现实生活中长度具有mm、dm、cm、m等,在css中,也具备多种长度单位,本文对常用的几种单位进行详细举例介绍~ px:像素单位 初学css时,px单位经常被使用,此处按下不表~  em:表示相对于 当前元素 或 父元素 的font-size的倍数

    2024年02月09日
    浏览(49)
  • 移动端适配 rem、postcss-pxtorem、postcss-px-to-viewport、vw vh

    移动端设计稿一般是750px,如果没有用taro或者uniapp这类的框架,就需要自己来进行css的适配。 一、Rem rem是相对于根元素html字体大小的一个css单位,默认情况下html的font-size=16px,所以1rem = 16px。可以动态设置html的字体大小,比如设置html的font-size=100px,那么1rem=100px。重点就是

    2024年02月04日
    浏览(45)
  • javascript常见100问|前端基础知识|问ajax-fetch-axios-区别请用 XMLHttpRequestfetch 实现 ajax节流和防抖px em rem vw/箭头函数的缺点

    HTML CSS JS HTTP 等基础知识是前端面试的第一步,基础知识不过关将直接被拒。本章将通过多个面试题,讲解前端常考的基础知识面试题,同时复习一些重要的知识点。 扎实的前端基础知识,是作为前端工程师的根本。基础知识能保证最基本的使用,即招聘进来能干活,能产出

    2024年04月27日
    浏览(51)
  • JavaScript基础(27)_内联样式的获取和修改、获取元素当前显示的样式

    内联样式的获取和修改 获取元素的内联样式: 修改元素的内联样式: 注意: 1、如果CSS的样式名中含有-,这种名称在JS中是不合法的,会被认为是运算符-,因此,需要将这种样式名修改为 驼峰命名法 ,去掉-,然后将-后的字母 大写 。 2、内联样式有较高的优先级,所以通

    2024年01月18日
    浏览(50)
  • PX4编译过程中报错通用解决办法

    时刻两年,再次配置PX4环境,又踩了一遍坑,过程中遇到报错真的是欲哭无泪,但是解决完回头再来看其实问题并不复杂。 本篇文章面向在PX4-Autopilot目录执行命令 make px4_sitl gazebo 检测环境是否配置成功时出现的子模块缺失的问题,是这次配置环境时的血泪教训。 这类问题在

    2024年02月07日
    浏览(40)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包