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倉庫地址：https://github.com/ElemeFE/element

首先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 。

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 中進行了組件的全局註冊和導出。

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

添加組件 TypeScript 支持

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

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 文件中導入新增的類。

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倉庫 這樣的方式安裝。

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

本文轉載自：https://www.limitcode.com/detail/5db589bf10dcbf0b1852b349.html