關於元件封裝

2021-08-21 19:03:25 字數 720 閱讀 5676

1善於總結,通常乙個公司大部分專案,頁面排版型別相近,比如管理系統

1.1從布局上講:大都是上左右結構,適合用easyui做為主框架右邊主頁面用iframe巢狀

1.2從模組上講:常用元件就是**查詢,表單提交,彈出模態框,選項樹,表單驗證,tab選項卡

1.3從頁面樣式風格上講:一般就是紅色和藍色為主打顏色

2建立公司專案樣式庫

1.1重用性:樣式選擇用less編寫,用變數定義樣式,增加靈活性,比如:@theme_color,@theme_font_size,@header_title_font_size

1.2選擇多樣性:不止定義一套樣式,同樣布局使用bootstrap,easyui各定義一套,便於技術選型,比如按鈕樣式多套,便於符合ui設計

3建立公司常用元件封裝

3.1總結公司常用功能模組,比如:彈出模態框,載入select選項卡,日期格式化,載入層級關係樹結構

3.2根據公司使用場景進行二次封裝,比如easyui的彈出框,我們經常會有彈出框內容比較複雜,而且內容需要復用,此時就需要將彈出內容作為 乙個單獨頁面,用iframe嵌入到easyui的window的body中取,原來的框架並不能滿足我們需求,就需要自定義module

3.3定義module的時候要考慮復用性,靈活性,通過外接傳參控制modal的樣式,iframe的id和樣式,以及easyui的window的各種引數設定, 比如是否modal,是否close,是否collapse

Angular元件封裝

前言 在專案中我們常看到乙個頁面裡的 在很多頁面裡面用到,我們會把它封裝成乙個元件供多個頁面引用我們在頁面看到類似於下圖的標籤,就是引用的封裝好的元件 changepage event editbutton btnedit addopen addopen event,addmodal editdat...

vue 封裝元件

一 通過install 封裝 1 建立元件資料夾包含 vue檔案和對應的.js檔案 如圖 2 完成元件模板 這是乙個公共元件內容 3 在相應的js內註冊元件 list.js檔案 import mylist from list.vue const list export default list 匯入...

svg元件封裝

檔案體積小,能夠被大量的壓縮 可無限放大而不失真 向量圖的基本特徵 在視網膜顯示屏上效果極佳 能夠實現互動和濾鏡效果 1.安裝相應的npm包 yarn add svg sprite loader svgo dev2.src資料夾下新建乙個icons資料夾。裡面存放svg格式的圖示。index.js實...