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%;
    }
  }