首页 > 其他分享 >element-ui的el-dialog主体滚动的小技巧

element-ui的el-dialog主体滚动的小技巧

时间:2023-07-05 15:35:47浏览次数:38  
标签:__ el flex element 滚动条 ui dialog

一. 场景

element-ui的el-dialog的主体内容变多的时候,应该需要滚动条,所以解决方式:

  1. 局部/全局设置样式;
  2. el-dialog源码改造。

注意:看完了解思路,掌握max-height和overflow:auto的联合使用,el-scroll的使用即可

二. 方案一

  • 仅针对el-dialog__body的部分做处理,
  • max-height:可以让内容少于自己限制的高度的时候,自己撑开,200px是自己自定义的
  • scss代码是全局的
  • 用法:
<el-dialog class="global-dialog"></el-dialog>
.global-dialog {
  .el-dialog__body {
    max-height: calc(100vh - 300px));
    overflow: auto;
  }
}

三. 方案二

利用固定容器最大高度和flex布局限制el-dialog__body

  • 用法:
<el-dialog class="global-dialog"></el-dialog>
.global-dialog {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .el-dialog {
    margin: 0!important;
    max-height: calc(100% - 80px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .el-dialog__body {
    overflow: auto;
  }
}

优点:这种方案,可以始终保持弹窗居中

四. 方案三

  • 重新创建dialog,覆盖原来element-ui的el-dialog,Vue.component('elDialog', myDialog)
  • 新写的myDialog组件prop属性"isScroll"决定了是否开启滚动
<div v-if="rendered" class="el-dialog__body">
          <el-scrollbar v-if="isScroll" :style="{ 'height': 'calc(90vh - 150px)' }">
            <slot />
          </el-scrollbar>
          <template v-else>
            <slot />
          </template>
</div>
// 必要的
//隐藏底部原始滚动条
/deep/ .el-scrollbar__wrap {
  overflow-x: hidden !important;
}

五. 优化

  • 使用方案一或者方案二,同时把原始滚动条的样式改成element-ui的
// 滚动条的宽度
::-webkit-scrollbar {
  // opacity: 0;
  transition: opacity 340ms ease-out;
  width: 6px;
  cursor: pointer;
  background-color: yellow;
  // &:hover {
  //   opacity: 1;
   
  // }
}

// 滚动条的设置
::-webkit-scrollbar-thumb {
  display: block;
  width: 100%;
  background-color: rgba(144,147,153,.3);
  transition: .3s background-color;
  border-radius: 4px;
  &:hover {
    background-color: rgba(144,147,153,.5);
  }
}

标签:__,el,flex,element,滚动条,ui,dialog
From: https://www.cnblogs.com/listenMao/p/17528657.html

相关文章

  • Element-plus按需导入报错:Error: Cannot find module 'node:module'
    1.问题vue3项目使用ElementPlus组件库,配置按需导入:首先安装unplugin-vue-components和unplugin-auto-import这两款插件npminstall-Dunplugin-vue-componentsunplugin-auto-import然后按照文档在配置文件中进行相关配置;因为更改了配置文件,所以得重新启动项目--......
  • Java批量操作Excel文件实践
    摘要:本文由葡萄城技术团队于博客园原创并首发。转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。前言|问题背景在操作Excel的场景中,通常会有一些针对Excel的批量操作,批量的意思一般有两种:对批量的Excel文件进行操作。如导入多个Excel......
  • 企业级logstash简单使用(ELK)
    企业级logstash简单使用(ELK)要使用logstash收集到Elasticsearch的方式,需确保logstash版本与es版本一致。由于我也是刚刚研究使用,所以本文暂不会出现原理性的东西。Logstash介绍Logstash是具有实时流水线能力的开源的数据收集引擎。Logstash可以动态统一不同来源的数据,并将数......
  • vue-treeselect 被 overflow 遮挡
    场景在一个内容区域设置了overflow纵向滚动的对话框中,内部的vue-treeselect组件下拉框选项被遮挡了。解决办法给vue-treeselect设置appendToBody和z-index属性。注意事项设置了appendToBody后,下拉框选项的字号会变大。为了与原来的字号相匹配,需要修改样式。找......
  • elementui 时间选择器默认时间格式
    <el-date-pickerv-model="searchForm.date"@change="getDate"type="daterange"range-separator="至"......
  • 曲线艺术编程 coding curves 第十四章 其它曲线(Miscellaneous Curves)
    第十四章其它曲线(MiscellaneousCurves)原作:KeithPetershttps://www.bit-101.com/blog/2022/11/coding-curves/译者:池中物王二狗(sheldon)blog:http://cnblogs.com/willian/源码:github:https://github.com/willian12345/coding-curves曲线艺术编程系列第十四章这是......
  • jmeter非gui运行,jtl生成了,但是html报告没有生成
     jmeter非gui运行,jtl生成了,但是html报告没有生成,查看log,内容如下: 22:45:00,913ERRORo.a.j.JMeter:Errorgeneratingdashboard:org.apache.jmeter.report.dashboard.GenerationException:Errorwhileprocessingsamples:Mismatchbetweenexpectednumberofcolumns:17an......
  • python celery 使用
    目录结构配置点击查看代码fromceleryimportCelery,platformsfromkombuimportExchange,Queueplatforms.C_FORCE_ROOT=Truebroker='redis://127.0.0.1:6380/1'backend='redis://127.0.0.1:6380/2'app=Celery('sxj',b......
  • 一种基于DeltaE(CIE 1976)的找色算法Cuda实现
    书接上文一种基于DeltaE(CIE1976)的找色算法DeltaE是评估色彩准确度的重要测量指标。摄影师、影片编辑和平面设计师等创意专业人士都应重视这项标准,因其是选择专业级显示器的重要考虑因素。常见的找色算法都是基于颜色RGB上的数值差,这种方法虽然快捷,但是和人眼视觉上的色......
  • [-002-]-Python3+Unittest+Selenium Web UI自动化测试之显示等待WebDriverWait
    1、WebDriverWait基本用法引入包#文件引入fromselenium.webdriver.support.uiimportWebDriverWaitfromselenium.webdriver.supportimportexpected_conditionsasEC每0.5s定位ID为userid的元素,如果定位成功,执行下面的代码;直至15s超时抛出异常可用来检查页面元素是......