背景
我司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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/176544.html
標籤：JavaScript