解決 [email protected] > el-tab-pane 導致瀏覽器卡死的問題。

起因

起因用 el-tab-pane 與 el-dialog 組合導致瀏覽器卡死。
經過分析原因是 el-tab-pane 添加 內容 會出現內部死循環，從而導致瀏覽器卡死。

爲什麼會這樣子？？？？

各方研究發現 [email protected] > el-tab-pane與[email protected]不兼容。。。

所以 vue-cli3 + [email protected] 創建項目必然會遇見這問題。（[email protected]版本一上都會有此BUG）

網絡上的方案沒一個很優雅的解決方案。絕大多數都是降低版本來解決。
納尼，那不是很多新功能不能用了。所以動手解決了下併發布出來供大家使用。

最低限制

• [email protected] 以上

導包

npm install el-tab-pane-ext -s
// or
yarn add el-tab-pane-ext -s

在 main.js 注入全局

import Vue from 'vue'
import Element from 'element-ui'
import ElTabPaneExt from 'el-tab-pane-ext'

Vue.use(Element)
Vue.use(ElTabPaneExt)

or 局部注入 $\color{red}(根據需求任選其一，推薦全局)$

import ElTabPaneExt from 'el-tab-pane-ext'
export default {
  components: {
    'el-tab-pane-ext': ElTabPaneExt
  },
}

使用方法

<el-tabs v-model="tabs">
  <el-tab-pane-ext label="tab1" name="tab1">
     <template v-slot:content>
      <h1>Hello 1</h1>
    </template>
  </el-tab-pane-ext>
</el-tabs>

源碼地址 求點贊

https://github.com/YeYinhai/el-tab-pane-ext