精华内容
下载资源
问答
  • 项目背景: 需求是,在触发各节点时,要显示当前节点下各时间点对应的订单量,并以表格形式表现。...使用dialog的过程中,也是出现了适配问题,dialog高度需要做适配。于是,通过定义以下样式,进行适配...

    项目背景:

            需求是,在触发各节点时,要显示当前节点下各时间点对应的订单量,并以表格形式表现。如图所示:

    前期:

    引入element ui 基本可以满足大部分的样式。

     第一次使用el-popover+el-table组合,发现table无法适配原始页面,不会随机型大小进行缩放适配。超出了屏幕范围。但调试无果。

    第二次,选择了el-dialog+el-table结合使用。

    使用dialog的过程中,也是出现了适配问题,dialog高度需要做适配。于是,通过定义以下样式,进行适配:

    .pub_dialog {
        display: flex;
        justify-content: center;
        align-items: Center;
        overflow: hidden;
        .el-dialog {
            margin: 0 auto !important;
            height: 90%;
            overflow: hidden;
            .el-dialog__body {
                position: absolute;
                left: 0;
                top: 54px;
                bottom: 0;
                right: 0;
                padding: 0;
                z-index: 1;
                overflow: hidden;
                overflow-y: auto;
            }
        }
    }

    el-dialog标签中设置class="pub_dialog"即可。

    弹窗为页面高度的90%,且上下居中。

    el-dialog__body内容部分会根据内容的高度,自动显示上下的滚动条。

    如上转载自:https://www.mybj123.com/5131.html

    经过以上,dialog能够适配整个页面,但是多个机型测试,发现屏幕小的机型中,当表格下拉列表过长时,表格长度超出了dialog的长度。如图:

    这样的结果还会影响那个机型的下拉,下拉不到底,且滑动效果是滑动的当前弹框后边的主页面。

    先解决这个超出长度的问题:

    在dialog中添加表格,但是表格数据过多时,弹框会被拉长。然后就想设置表格内容滚动。但尝试修改table自身的高度,发现就算改了,当列表加长的时候,还是会超出。并没有控制住。

    如上解决方案:

    /deep/.el-dialog__body {
      height: 70vh;overflow: auto;
    }

    vh:1vh等于视口高度的1%  补充:css3自适应布局单位vw,vh详解

    通过添加以上控制,发现可以将表格控制再dialog中通过滚动条实现滑动查看数据的效果了。

    至此,整个需求算是基本完成了。

    但是存在另外也兼容问题就是,iPhone7机型或者系统,在使用以上办法时,操作滚动条,会导致内部页面跟着滚动。

    这个问题暂时还没有解决,保留,

    展开全文
  • 解决el-dialog中间自适应的问题

    千次阅读 2019-11-12 15:00:37
    我要做这种效果,搞了快20分钟才找到方法,具体如下 好了,下次记住了!


    我要做这种效果,搞了快20分钟才找到方法,具体如下
    在这里插入图片描述
    好了,下次记住了!

    展开全文
  • 有一个对话框el-dialog,在对话框里放置按钮、表单及el-table,如果把el-table限制了,小屏幕用户使用起来会很难受。我希望高度能随用户屏幕进行调整,大屏幕用户尽量让el-table显示出来(起码显示10条数据),但又不...

    需求:
    有一个对话框el-dialog,在对话框里放置按钮、表单及el-table,如果把el-table高度固定了,小屏幕用户使用起来会很难受。我希望高度能随用户屏幕进行调整,大屏幕用户尽量让el-table显示出来(起码显示10条数据),但又不能太大,因为这样用户如果只显示10条数据,高度拉得特别长,el-table空白会特别多。所以需要设置max-height。高度自适应我这里直接使用vh,如有缺点,还请各位看官评论。

    代码:

            <el-table
              ref="table"
              :data="tableData"
              highlight-current-row
              :cell-style="tableCellStyle"
              height="60vh"
              max-height="480"
    
        tableCellStyle({ row, column, rowIndex, columnIndex }){
          if (column!==0) {
            return "padding:6px 0;"
          }
        },
    

    这里的480px是我完成限制10条数据el-table所需要的高度(我还修改了el-table每个数据行的padding数值),如果你的el-table高度不是这样,可以另行调整。60vh是我表单内容较少且在小屏幕下能完整显示el-table的情况,可以另行调整。

    展开全文
  • 定义样式如下: .abow_dialog { display: flex; justify-content: center; align-items: Center; overflow: hidden; .el-dialog { margin: 0 auto !important; height: 90%; ...

    定义样式如下: 

    .abow_dialog {
        display: flex;
        justify-content: center;
        align-items: Center;
        overflow: hidden;
        .el-dialog {
            margin: 0 auto !important;
            height: 90%;
            overflow: hidden;
            .el-dialog__body {
                position: absolute;
                left: 0;
                top: 54px;
                bottom: 0;
                right: 0;
                padding: 0;
                z-index: 1;
                overflow: hidden;
                overflow-y: auto;
            }
        }
    }
    在el-dialog标签中设置class="abow_dialog"即可

    弹窗为页面高度的90%,且上下居中。

    el-dialog__body内容部分会根据内容的高度,自动显示上下的滚动条。

    结合《directive全局定义侦听window.resize,局部绑定侦听宽高的变化》可实现如下图效果:


    ————————————————
    版权声明:本文为CSDN博主「tomabow」的原创文章
    原文链接:https://blog.csdn.net/tomabow/java/article/details/89332683

    展开全文
  • 主要介绍了vue+elementUI 实现内容区域高度自适应的示例,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
  • 我们在使用elementUI的对话框el-dialog中发现,设置的默认宽度是百分比,比如width=“30%”,这样对话框会随着页面的宽度而自适应,但是如果我们只想要,无论页面有多宽,对话框都是固定的宽度,不随着页面的宽度而...
  • el-dialog改变中间内容的高度问题

    万次阅读 2019-06-03 13:46:44
    el-dialog中间内容的css(这是个全局样式): .el-dialog .el-dialog__body { border-top: 1px solid #dcdfe6; border-bottom: 1px solid #dcdfe6; max-height: calc(100vh - 281px); overflow-y: auto; } ...
  • <template> <!-- 渠道分组管理 --> <div class="channel-group"> ...div class="channel-group__filter-box">...el-form ref="channelForm" :model="channelGroupForm...el-form-item label="渠道组.
  • 可以直接设置top
  • el-dialog中嵌入form表单元素时,进行缩小浏览器时,相关的表单元素往外跑,不能很好的进行相关的自适应。 问题解决方案 定义相关的表单元素的宽度单位为百分比,这样能够使其很好的进行自适应布局。 ...
  • 界面描述:el-dialog弹出框。据需求传递参数,显示弹框的位置[左中右] --> <template> <el-dialog :customClass="[location=='左' ? 'dialogLeft' : location=='中'? 'dialogCenter' : 'dialogRight']...
  • el-dialog class="dialogClass"> <style lang="scss" scoped> .dialogClass { .el-dialog { .el-dialog__body { max-height: 500px !important; // max-height:calc(100vh - 170px); min-height: 100...
  • 解决修改el-dialog内的样式无效问题

    千次阅读 2021-05-06 20:12:40
    修改dialog必须在非scoped环境下,可以在App.vue的样式写,并给需要加的dialog一个类名eg: /* 修改dialog必须在非scoped环境下 */ .createOrderDialog > div > div > div { margin-top: 15px; }
  • Element UI 弹窗(Dialog)改成自适应高度,仅body内容部分滚动 简单的定位实现过程 给想要自适应高度的div设置position:absolute;top:0;left:0;right:0;bottom:0;(具体距离设置看情况设定) .abow_dialog {
  • el-dialog本身只支持标题栏右上角有关闭按钮,故需要使用slot="title" 重写覆盖原本的标题栏。 除了这个查询了下官方API文档,其他都是简单的逻辑代码而已。 组件代码: <template> <div class="big-...
  • * 给elementUI的dialog上加上 v-dialogDrag 指令就可以实现弹窗的全屏和拉伸了。 */ // v-dialogDrag: 弹窗拖拽+水平方向伸缩 Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { //弹框可...
  • 我会弹出一个dialog 里面是轮播图片,让这...由于dialog高度自适应的,只要获取图片宽度赋值给dialog就能实现 <el-dialog append-to-body :visible.sync="visible" :width="width"> <img :src="src...
  • el-dialog中中使用echarts

    2020-09-29 08:57:38
    el-dialog :title="diaTitle" :visible.sync="dialogVisible" @open="open()" > </el-dialog> 2、在定时函数setTimeout中执行方法 open() { const t = this; setTimeout(() => { // 执行...
  • el-dialog 标签的width绑定变量dialogWidth,(在data中定义该变量) <el-dialog title="新增临时单" :visible.sync="dialogVisible" :width="dialogWidth" :close-on-click-modal="false"> 在mount监听...
  • vue中对el-dialog宽度调整方法之一二

    万次阅读 2018-10-11 08:40:00
    vue时,会用到el-dialog做为弹窗,但这个弹窗的宽度默认为50%.因项目中需要调整弹偿的宽度,需要设置其属性。 尝试过程如下: 方法1: 通过查找 el-dialog的官网api,查到其有宽度width的属性,设置其宽度比例即可 ...
  • 基于el-dialog, 封装了一下。 大概粘了一下效果 组件使用 <el-dialog v-dialogDrag ref="xhzqDialog" class="xhzqDialog" :title="title" :fullscreen="isfullscreen" :visible.sync="dialogVisible" ...
  • 定义样式如下: .abow_dialog { display: flex; justify-content: center; align-items: Center; overflow: hidden; .el-dialog { margin: 0 auto !important; height: 90%; ...
  • ::v-deep .el-dialog .el-dialog__body{ display: flex; justify-content: center; align-items: center; } 为什么要使用 ::v-deep来穿透样式? 因为是scoped样式lang=“scss” 写了 /deep/不生效**(以后就写::...
  • echarts在element(el-tab)宽度不是自适应的问题 问题 项目中有一个需求,就是有两个tab页,两个tab页面中都有echarts图表;在实现需求的过程中,默认显示的tab页图表宽高度显示正常,但是需要切换才能显示的tab页...
  • vue+element的弹窗,自定义指令实现弹窗可拖拽拉伸。解决因为拉伸事件导致的无法选中弹窗里表单文字的问题。添加了边界判断条件,不允许拖到可视范围之外了。添加了弹窗如果有表格,对表格进行自适应的功能
  • 首先是html 这个没啥说的 <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>...el-dialog title="Activiti工作流在线流程设计编辑" :fullscreen="true" st...
  • vue这种轻量级渐进式框架的舒适自不必说,但一直困扰着我的,是如何方便又优雅的弹出模态dialog... 对于我这种在jquery出现之前就用document.getElementById敲代码的老顽固来说,我始终不能完全接受把dialog在编码...
  • 同时要注意的是和顶部浏览器的距离(top=“2vh”),这个可以根据自己的屏幕大小调整,建议在2-5之间,如果你当前页面是一个很大的滚动屏,弹框没有设置top高度,会导致其top为默认高度,使得弹框(tk)需要滚动才能显示...

空空如也

空空如也

1 2 3 4 5 ... 19
收藏数 365
精华内容 146
关键字:

el-dialog高度自适应

友情链接: music.rar