element-UI的Dialog弹出框蒙版被遮住

类似于这种,相信会有很多人遇到这种问题的,其实解决的方法很简单
<el-dialog title="修改分类" :visible.sync="modifyFormVisible" :modal-append-to-body="false" width="30%" center>
<el-form :model="modifyData" ref="modifyForm" :rules="rules">
<el-form-item label="分类名称:" label-width="100px" prop="categoryName">
<el-input v-model="modifyData.categoryName" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="分类级别:" label-width="100px" prop="categoryLevel">
<el-input v-model="modifyData.categoryLevel" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="目录层级:" label-width="100px" prop="parentCode">
<el-input v-model="modifyData.parentCode" auto-complete="off"></el-input>
</el-form-item>
</el-form>
只需要加一条 :modal-append-to-body="false" 其实仔细看官方文档的同学也会发现这个的,它接受一个布尔值,默认为true的,我们需要把它改成false,让遮罩层插入至 body 元素上
element-UI的Dialog弹出框蒙版被遮住的更多相关文章
- vue--vant组件库Dialog弹出框
安装vant UI框架: cnpm install vant –-save-dev 导入组件-在main.js里: import Vant from 'vant'; import'vant/lib/v ...
- 使用easeui dialog弹出框中使用CKeditor多次加载后无法编辑问题
问题呈现:弹出框页面 <tr class="addtr"> <th>内容</th> <td> <!-- <textare ...
- vue在element-ui的dialog弹出框中加入百度地图
参考:https://blog.csdn.net/u012724595/article/details/82703579 <!-- gps弹窗 --> <el-dialog v-di ...
- JQuery EasyUI dialog弹出框的 close 和 destroy
开发项目中(使用JQuery EasyUI),根据业务需要重叠弹出多个提示框的情况,会出现如下情况:页面出现两个div模块调用同一个弹出页面,页面的数据接受框元素不能实时存储数据解决方案: 使用$(t ...
- 弹出框插件——dialog
基于jquery和dot.js弹出框插件,兼容IE6+等其他浏览器. 思想:弹出框元素插入body节点中,并在页面垂直居中显示(fixed定位),触发确定和关闭事件绑定. 注意ie6包含两个问题:一. ...
- Android 如何利用Activity的Dialog风格完成弹出框设计
在我们使用Dialog时,如果需要用到很多自己设计的控件,虽然可以让弹出框显示出我们需要的界面,但却无法找到地方完成控制代码的编写,如何解决这个问题呢,我们可以将Activity伪装成Dialog弹出 ...
- JavaScript插件——弹出框
(JavaScript插件——弹出框) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.htm ...
- element ui中dialog相关问题
一,今天需要在dialog里面引入另一个页面,就是打开dialog显示该页面(把页面放到dialog中),引入的语句如下: <iframe src="view?path=rkdj_b& ...
- Android--自定义弹出框-自定义dialog
项目要用到弹出框,还要和苹果的样式一样(Android真是没地位),所以就自己定义了一个,不是很像(主要是没图),但是也还可以. 废话不多说了,直接上代码 1.先看布局文件 <?xml vers ...
随机推荐
- 微信小程序 canvas 文字自动换行
Page({ drawCanvas: function(ctx) {// 地址 ctx.setFontSize() ctx.setFillStyle('#9E7240') ctx.textAlign= ...
- VS Code怎样设置成中文
打开 VS Code Ctrl + Shift +p打开搜索框 搜索框内输入Configure Display Language 回车 修改代码中“locale”后面引号内内容为zh-CH 重新启动V ...
- 清理mac的硬盘空间,清理Xcode,清除“其他”
下面是一些清理的方法:打开Finder使用快捷键command+shift+g输入路径即可进入该文件夹 1. 移除DerivedData,建议定期清理,会重新生成 此文件夹内是模拟器运行每个APP生成 ...
- <3>Centos系统完整安装python流程
一.环境 系统:Centos7 Python:3.6.5 自带pip.setuptools 二.命令 介绍:因为yum是依赖于python2,所以千万别删除自带的python2,下面的方法就是py2 ...
- Python 经典面试题汇总之基础篇
基础篇 1:为什么学习Python 公司建议使用Python,然后自己通过百度和向有学过Python的同学了解了Python.Python这门语言,入门比较简单,它简单易学,生态圈比较强大,涉及的地方 ...
- python中json文件处理涉及的四个函数json.dumps()和json.loads()、json.dump()和json.load()的区分
一.概念理解 1.json.dumps()和json.loads()是json格式处理函数(可以这么理解,json是字符串) (1)json.dumps()函数是将一个Python数据类型列表进行js ...
- 报错TypeError: $(...).live is not a function解决方法
报错的原因是这个方法在jquery1.7以后就被废除了, 1.7以后的版本改用.on()方法 之前的用法: .live(events, function) 新方法: .on(eventType, se ...
- Python递归函数
参考: https://pythonspot.com/recursion/ https://www.python-course.eu/recursive_functions.php 一.递归函数两大要 ...
- Exception in thread "main" org.I0Itec.zkclient.exception.ZkAuthFailedException: Authentication failure is thrown while creating kafka topic
Exception in thread "main" org.I0Itec.zkclient.exception.ZkAuthFailedException: Authentica ...
- export,export default和import的区别以及用法
首先要知道export,import ,export default是什么 ES6模块主要有两个功能:export和import export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口 ...