elementUI踩坑
1.滚动条消失,body中莫名出现行内样式overflow: hidden;
在做某个图片上传,显示功能出现的问题.控制台并没有报错,代码也并无相关操作
必须重新刷新页面之后滚动条才会显示出来
几天后才发现是内置图片组件 <el-image>
的问题,只要点击图片组件 <el-image>
就会出现滚动条消失
这是element-ui 的 el-image的bug
源码可以看到 在打开的时候给整个组建添加了click事件 被点击就把body.overflow="hidden" , 但是只有在"closeViewr" 关闭预览的事件中才取消 如果没有开启预览功能 那么这个overflow就一直是hidden
解决方法:
- 将所有图片组件 ** ** 更换成原生 ** **
- 自己关闭dialog的事件中添加over-flow="auto"解决
2.弹框显示影藏页面出现抖动
#### 2.弹框显示影藏页面出现抖动
解决方法:
在全局样式中添加
//弹框抖动
.el-image-viewer__wrapper,
.el-dialog {
-webkit-backface-visibility: hidden;
/* Chrome 和 Safari */
-moz-backface-visibility: hidden;
/* Firefox */
-ms-backface-visibility: hidden;
/* Internet Explorer */
backface-visibility: hidden;
}
//或者 transition: none !important;
3. vue-element-admin 导航栏图标Icon 颜色统一
在全局样式中添加
path { fill: inherit !important }
4.Upload 上传组件 携带token
data中记得声明token: {}
5.关于TinyMCE富文本相关
中文文档还是很详细的 http://tinymce.ax-z.cn/
#### 6.MarkdownEditor样式出现问题
*如下:*
解决方法:
.markdown {
// >>> 或 ::v-deep 样式穿透 深度作用选择器
::v-deep .tui-editor .te-preview-style-vertical .te-md-splitter {
width: 100%;
}
}
elementUI踩坑的更多相关文章
- webpack踩坑--webpack 2.x升级至4.x
一.安装webpack-cli,webpack@4.26.1 1.npm install webpack-cli -D 2.npm install webpack@4.26.1 -D 二.踩坑 执行n ...
- vue中的小踩坑(01)
前言: 昨天算是使用vue2.0+element-ui做了一点小小的页面,可是源于其中遇到的问题,特地整理一下,以防自己还有其他的小伙伴们继续踩坑. 过程: 1.不知道大家有没有注意到 ...
- Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记
前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...
- Vue + TypeScript 踩坑总结
vue 和 TypeScript 结合的情况下,很多写法和我们平时的写法都不太一样,这里总结我项目开发过程中遇到的问题和问题的解决方案 有些问题可能还没解决,欢迎各位大佬给与提点. 另外,使用本文前可 ...
- electron项目踩坑--A JavaScript error occurred in the main process:document is not defined
前言 记录electron-vue项目开发中遇到的一个错误,运行时报错如图: 控制台报错如下: ReferenceError: document is not defined at Object.&l ...
- vue2项目,踩坑Jest单元测试
目前的项目已经维护了挺久,由于客户要求,我们要为项目加上单元测试,挑选一番后选择了Jest(配置简便,开箱即用),下面记录了此次为项目添加Jest作为单元测试的经历. 安装Jest 1. 在项目目录下 ...
- Nuxt.js的踩坑指南(常见问题汇总)
本文会不定期更新在nuxt.js中遇到的问题进行汇总.转发请注明出处,尊重作者,谢谢! 强烈推荐作者文档版踩坑指南,点击跳转踩坑指南 在Nuxt的官方文档中,中文文档和英文文档都存在着不小的差异. 1 ...
- Spark踩坑记——Spark Streaming+Kafka
[TOC] 前言 在WeTest舆情项目中,需要对每天千万级的游戏评论信息进行词频统计,在生产者一端,我们将数据按照每天的拉取时间存入了Kafka当中,而在消费者一端,我们利用了spark strea ...
- Spark踩坑记——数据库(Hbase+Mysql)
[TOC] 前言 在使用Spark Streaming的过程中对于计算产生结果的进行持久化时,我们往往需要操作数据库,去统计或者改变一些值.最近一个实时消费者处理任务,在使用spark streami ...
随机推荐
- Delphi10.3的DBGrid中memo类型显示内容而不是(WIDEMEMO)
1]连接好数据库,并显示: 2]增加所有字段: 3]添加事件: // FDQuery1UserName: TWideMemoField; procedure TForm1.FDQuery1Use ...
- Python-hashlib、OS、Random、sys、zipfile模块
# print(sys.version) #python 版本 # print(sys.path) # print(sys.platform) #当前什么系统 # print(sys.argv) #当 ...
- 手机抓包HTTPS (Fiddler & Packet Capture)
手机抓包HTTPS (Fiddler & Packet Capture) 以前写了一个小游戏(消灭病毒)的刷金币小脚本,使用需要获取openid ,就需要抓微信的HTTPS包 一直都是用Fid ...
- python基础知识8——常见内置模块
Python之路-python(常用模块学习) 模块介绍 time &datetime模块 random os sys shutil shelve xml处理 yaml处理 configpar ...
- 洛谷3834 hdu2665主席树模板,动态查询区间第k小
题目链接:https://www.luogu.com.cn/problem/P3834 对于区间查询第k小的问题,在区间数量达到5e5的时候是难以用朴素数据结构实现的,这时候主席树就应运而生了,主席树 ...
- 贪心-Course Schedule III
2020-02-01 21:37:39 问题描述: 问题求解: 对于课程来说截止时间在前面的肯定需要优先安排,所以首先需要将courses按照deadline进行排序. 然后只需要不断的加入当前的课程 ...
- [A*,启发式搜索] [SCOI2005] 骑士精神
链接:https://ac.nowcoder.com/acm/problem/20247来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言52428 ...
- Api接口幂等设计
1,Api接口幂等设计,也就是要保证数据的唯一性,不允许有重复. 例如:rpc 远程调用,因为网络延迟,出现了调用了2次的情况. 表单连续点击,出现了重复提交. 接口暴露之后,会被模拟请求工具(Jem ...
- Jupyter修改主题,字体,字号-教程
cmd控制台安装主题工具包:主题更换工具详解 pip install --upgrade jupyterthemes 查看可用主题: jt -l 设定主题: jt -t 主题名称 恢复默认主题: jt ...
- Windows 7集成IE11(离线安装包、补丁)
当Win7系统需要集成IE11时,我们需要提前打入6个补丁 KB2731771.KB2786081.KB2834140.KB2670838.KB2729094.KB2533623 32位 ★百度网盘 ...