ElementUI 源碼定製防坑指南

来源:https://www.cnblogs.com/limitcode/archive/2019/11/05/11797076.html
-Advertisement-
Play Games

背景 我司OA系統公文管理模塊Office線上編輯使用的是金格IWebOffice中間件【PPAPI插件,通過<object>標簽載入】,IWebOffice在chrome中設置div盒子的css樣式display:none會造成控制項的奔潰,出現空白等異常情況。用過ElementUI的都知道Tabs ...


背景

我司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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 先介紹下這個問題的由來: 上午其他項目組人員在rtx上問,求幫忙解決ie8相容性問題。 然後快到飯點,知道這個bug肯定不是那麼好解決,肯定不能耽誤吃飯時間。 果斷說,下午來弄。 下午3點開始去看這個bug。 具體問題就是:點擊修改按鈕報了缺少':',186行錯誤。 看了下他的代碼186行,是空白行 ...
  • transition過渡 和animation 動畫 要知道 transition過渡和animation動畫都是實現元素運動的一種方式。區別在於: transition過渡需要人為觸發,例如點擊觸發或者滑鼠懸停觸發,而animation是可以不需要人為觸發。transition功能支持從一個屬性值 ...
  • ECharts是一個由百度開發的純 Javascript 的圖表庫,pyecharts是某三位大佬將ECharts移植到Python項目中的產物,在Python網站中可以更輕鬆的接入圖表,但是個人感覺pyecharts比ECharts還是局限很大的,pyecharts1.x版本就更為縮水了,由於項目 ...
  • https://codepen.io/121595113/pen/qNZPZa ...
  • css盒模型: 外邊距 邊框 內填充 內容 盒模型分為兩種: 標準盒模型: 怪異盒模型(IE盒模型): 邊框:border border: 10px solid blue;表示設置10像素藍色實線條的邊框 是以下三個樣式的複合語法 border-width: 10px; 設置邊框的寬度 border ...
  • 在使用layui的時候,總有官方自帶模塊不夠用想自己擴展的時候,這時候我們就需要擴展模塊了。 模塊擴展有兩種: (一)普通地擴展 layui.define( function (exports) { }); (二)依賴其他模塊擴展 layui.define( [ 'xxx', 'xxx', 'xxx ...
  • 由於博客園本身的限制沒法把聲明直接放入head中,所以,這事只能托js去完成了。 ...
  • 前幾天想偽造一些數據,用到了隨機數,沒有自己寫,便在網上找了一下,找到了這篇文章:https://www.cnblogs.com/starof/p/4988516.html 。之後測試了一下,發現了一個關於parseInt的問題。最後發現造成問題的原因是對該方法不夠瞭解,下麵詳細說一下具體的過程。 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...