ElementUI 源碼定製防坑指南

背景

我司OA系統公文管理模塊Office在線編輯使用的是金格IWebOffice中間件【PPAPI插件，經過<object>標籤加載】，IWebOffice在chrome中設置div盒子的css樣式display:none會形成控件的奔潰，出現空白等異常狀況。用過ElementUI的都知道Tabs標籤頁，標籤之間切換用的正是display屬性，筆者要改的是使用width:0px;height:0px;opacity:0;visibility:hidden;作標籤的切換。

Fork element 源碼

GitHub倉庫地址：github.com/ElemeFE/ele…

首先Fork一份源碼到本身的github賬號。

接着使用git命令行工具將源碼clone到本地。

git clone https://github.com/itwmike/element.git複製代碼

筆者項目中使用的是 element 2.5.4 版本，因此從 2.5.4 這個tag簽出一個本身的分支進行開發。

git checkout -b v2.5.4 lk-element-ui  #從 v2.5.4 tag 建立分支
複製代碼

本地調試 element

npm install #安裝相應的依賴包npm run dev #運行調試，若是有報錯看看是否爲 ESlint 語法檢測提示的錯誤。複製代碼

修改 tabs 源碼

爲了避免污染源碼，筆者複製 tab-pane.vue 新建了一個本身的組件並命名爲 LoElTabPane，修改其內的源碼以下：

接着修改 tabs.vue 中代碼使其支持 新加的組件：

組件修改好後須要導出並進行全局註冊。

全局註冊 LoTabPane

在 packages 文件夾下增長 lo-tab-pane 文件夾並添加 index.js 文件，該文件主要用於導出 LoTabPane 。

1 2 3 4 5 6 7 8

import LoTabPane from '../tabs/src/lo-tab-pane.vue' ; /* istanbul ignore next */ LoTabPane.install = function (Vue) { Vue.component(LoTabPane.name, LoTabPane); }; export default LoTabPane;

接着修改根目錄下的 components.json 文件，在文件中加入 lo-tab-pane 。該文件的主要做用是在構建時生成 src/index.js，在 index.js 中進行了組件的全局註冊和導出。

1	"lo-tab-pane" : "./packages/lo-tab-pane/index.js" ,

添加組件 TypeScript 支持

在 types 目錄下新建 lo-tab-pane.d.ts 文件，除了類名外其餘內容和 tab-pane.d.ts 相同。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

import { ElementUIComponent } from './component' /** Tab Pane Component */ export declare class LoElTabPane extends ElementUIComponent { /** Title of the tab */ label: string /** Whether Tab is disabled */ disabled: boolean /** Identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane */ name: string /** Whether Tab is closable */ closable: boolean /** Whether Tab is lazily rendered */ lazy: boolean }

同時在 types/element-ui.d.ts 文件中導入新增的類。

1 2 3

import { LoElTabPane } from './lo-tab-pane' // 導入 export class LoTabPane extends LoElTabPane {} // 導出

添加組件到 examples 菜單

組件開發完成後添加到 examples 中進行測試。

拷貝 examples\docs\zh-CN\tabs.md 到同級目錄並命名爲 lo-tabs.md，將其內的 el-tab-pane 組件換成 lo-el-tab-pane。

在 examples\nav.config.json 中增長 lo-tabs 菜單。

組件發佈

網上博友說修改包名和版本號能夠將本身DIY出的 element 發佈到 npm，使用 npm install 安裝使用。其實這種作法是錯誤的誤導，筆者親驗純屬瞎扯蛋。

使用 npm run dist 打包後的文件在 lib 文件夾下，其中 element-ui.common.js 爲包入口，打開這個文件能夠看到存在不少相似

module.exports = require("element-ui/lib/mixins/emitter");複製代碼

這樣的代碼，使用的都是 element-ui 開頭的相對路徑。若是你的包名換成其餘，我敢保證在項目中打包的時候會報 xxx not find 錯誤。

正確的作法應該是將包發佈到 git倉庫，如github這樣的平臺，使用 npm install git倉庫 這樣的方式安裝。

1	npm install git+https: //github.com/itwmike/element.git

本文轉載自：www.limitcode.com/detail/5db5…