木灵鱼儿
阅读:31370
关于element的dialog垂直居中的完美解决方案
element的dialog弹窗,默认不是垂直居中的,只是水平居中,但是他有一个很好的地方,就是当窗口的高度小于dialog的高度时,他会有滚动条,并且可以完整的显示dialog,算是一个非常不错的兼容方式。
但是当我们对dialog进行css调整为垂直居中时,往往会使用下面两种样式:
绝对定位:
.el-dialog__wrapper {
position: relative;
.el-dialog {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
flex:
.el-dialog__wrapper {
display: flex;
justify-content: center;
align-items: center;
}
注意,在使用dialog垂直居中时,他的Attributes中top值需要设置为0,当然也可以手动css强行设置为0,看自己选择
两种方式都行,但是都有缺点。
绝对定位使用了transform
,这就会产生一个隐性的问题,当el-dialog里面有fixed定位是,就会发生定位失效的情况,所以,泛用性可能还是差一些,但是如果没有fixed定位,这个写法还是蛮好的。
flex的话,居中没问题,但是和绝对定位都有一个共同的问题,就是当页面高度小于dialog高度时,无法通过滚动条将dialong完整显示。
一时间也没想到啥解决方案,就一直放着,昨天跟同事聊,跟他讲了这个问题,然后她就去研究了,最后研究出来,我看了下,又百度了一些资料,大概明白是怎么回事。
她的代码是这样的:
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
封装一个dialog弹窗组件
需求看了半天uniapp官方提供的插件,发现就是没有dialog弹窗的封装,有点难受,这个弹窗其实用的地方还挺多的, 但是uni-popup组件的用法实在是有点粗暴啊,需要通过ref获取popup组件实例,操作组件实例的open和close方法实现开关,和我们日常的v-model绑定差了好多,于是自己想着造一个。在网页端我们watch监听props的变量,然后在nextTick会调中使用popup组件实例是没有问题的,但是在微信小程序中发现这个方法有一个问题?如果我这个弹窗默认就是true打开的状态,那么在watch中即便使用了nextTick我们也无法获取到组件的实例,这个不知道是不是...
flex布局知识补充
子元素自身的order属性子元素的order的作用详解:默认情况下order的值都为0,如果这个值越小,那么就越靠近起始点,值越大,位置就越后,order其实用于移动元素的位置,而位置的方向则取决于父元素设置的:flex-direction子元素自身的align-self属性从正常角度,align-self是控制子元素y轴的对齐方式,也称侧轴对齐,这个y轴的定义也是取决于父元素flex-direction子元素自身的flex-basis属性flex-basis的效果,最好配合:flex-shrink:0;让子元素不被压缩。flex-basis会根据主轴的来设置元素的宽度还是高度:当主轴是...
关于 element table多选里面实现单选的偷懒做法
在elment的table多选中增加单选逻辑,这个也不能说产品的问题,单选和多选应该算是比较基础的应用,但是,element并没有对单选做支持。于是我有了一个偷懒思路!前提由于table的一键全选按钮无法进行细致化操作,无法控制点击时选中的数量,只能在选中后的回调里面处理,所以,我的做法是单选时隐藏这个按钮。 selectable方法可以返回布尔值来表示当前格子是否允许勾选或者取消,其实就是禁用的意思。<el-table-column type="selection" :selectable="onSelectable"></el...

关于element el-input 输入的值需要转number的问题
前言经常是一个input表单需要输入数字和小数,那么如果仅仅是要求数据格式,我们可以通过表单校验的方式对输入的值进行限制,具体的做法,我之前就写过文章:《element input表单验证数字类型方法大全》里面有关于数字类型校验的方式,基本涵盖了日常需求。但是,仅仅就只能这样吗???no,如果后端要求你输入的数字,提交给他的时候也必须是数字类型呢?要知道,即便我们做了表单校验,校验它输入的必须是数字格式,但是input本身就是一个string类型的值,即便你设置type="number"也无法改变它值的类型。有人说用.number;其实这个问题之前就聊过了,这个修饰符...
关于element table合并格子的思路
效果图需要将第一个col值相同的格子row进行合并。实现element的表格提供了一个span-method方法,该方法会为每个格子运行一次。比如,有一个3行的表格,每行4个格子,那么span-method就会运行:3*4=12;共计12次。有时候我们并不需要每个格子都运行一次,在上面的需求上,我们只需要每行运行一次就行了,所以我们可以通过span-method的参数中,解构出columnIndex每行每个格子的下标。<script> export default { methods: { spanMethod({columnIndex}) { if(...

关于element侧边栏导航一些新想法
高亮问题由于侧边栏可能不会把所有的路由name都丢上去展示,常常是展示一个父级菜单名,子路由菜单作为页面内的导航啥的。常见的场景: 详情页为此,我们路由名与侧边栏导航菜单的name相对应的处理就不太行了。常见的做法就是在路由的meta里面添加一个activeRoute配置,里面标明需要高亮的侧边栏name那么这个activeRoute怎么配置呢?我个人觉得应该遵循父级优先的概念,如果子路由设置了,但是父级路由也设置了,那么以父级为准,也就是最上层路由为准,这样子集直接可以随便切换,不会影响侧边栏高亮,因为他有父级。那么如果没有父级,就使用自己遵循这个原则,我们对el-menu的defau...
关于element Tooltip组件与 Drawer和Dialog这种带遮罩层的冲突问题
问题当通过Tooltip组件,click事件触发抽屉或者弹窗功能时,Tooltip的hover效果,会在抽屉和弹窗功能关闭后又再次触发显示。bug图解决思路我估计是因为遮罩层的问题,导致元素的事件监听不到鼠标离开,导致关闭弹窗后,浏览器又自动选中了。所以我的解决办法很简单,找到那个触发hover效果的dom元素,对他进行离开事件触发即可。<el-tooltip effect="dark" content="通知" placement="bottom"> <a href="javascr...

element input异步校验+自定义错误提示
主要的效果就是用户注册时,输入的账号如果已经注册了,要提示已经注册,然后提供一个按钮,直接前往登陆。效果图教程首先我们要知道怎么进行自定义错误提示<template> <el-form :model="form" :rules="rules" ref="ruleForm"> <el-form-item prop="account"> <el-input v-model="form.account" name="a...

element input表单验证数字类型方法大全
是不是常常头疼数字类型的校验,整数,小数,往往无法通过一个rules的type属性搞定,自定义校验又五花八门,是否有一套标准流程呢?整数校验整数校验简单,input使用.number修饰符,rules配置type属性即可。<template> <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px"> <el-form-item label="短信条数:" pr...
关于element el-checkbox组件click事件的一些想法
el-checkbox本身是没有click事件的,但是我们可以通过native的方式穿透下去,但是这样的话会有一个问题,我们先看下代码:<el-checkbox v-model="checked" @click.native="onClick">备选项</el-checkbox>如果你在onClick函数中进行输出,你会发现,click实际上运行了两次,native本身是将事件绑定给了组件的根元素,这就导致他会被子元素的click事件冒泡触发。哪怕你加了stop也没有效果,因为stop只能防止根元素往上冒泡,并不能阻止他本身...
ra
Google Chrome Windows 10求知
老徐
Google Chrome Windows 10学习下
111
Google Chrome Windows 10学习
121
Google Chrome MacOS学习
111
Google Chrome Windows 10学习
1
Google Chrome Windows 10学习
w
Google Chrome Windows 10学习
1
FireFox MacOS学习
123
Google Chrome Windows 10学习
skya
Google Chrome MacOS学习