一分鐘閱讀 關於元件化,我有一些小建議

2021-09-27 21:04:46 字數 879 閱讀 3628

隨著公司專案多端化,開發所需要注意的細節越來越多。我在會議上提出元件化開發,希望能把業務細節與技術細節區分開來。

首先我們需要找到切入點,我採取的是通過模仿element-ui的元件,先讓我們美工小姐姐,照著element的元件庫描繪一版我們自己的元件,內容包括 顏色、字型、按鈕、 等基礎ui元件。這就是我們元件化第一步,ui 元件形成。

其次是業務元件的補充,這方面我和專案經理還有其他前端一起商討,將跨場景跨頁面同樣效果的部分給抽象成元件。元件化第二步,業務元件形成。

然後就是漫長的更迭與元件補充。

無論是ui元件還是業務元件,都包含著class與css。

變數值我選擇存放在兩個公共檔案內:

乙個負責管理class名,諸如 x-btn-s,x-btn-m,x-btn-l,x-pic-s,宣告規則:公司名-元件名-尺寸(業務場景)。

另乙個負責管理 css 變數值, 諸如 $-font-s: 12px,$-font-m:16px; $-font-l:24px;$-background-warn: #f00;宣告規則:$-相關樣式-大小(顏色)。

再通過 exports 與 import 對全域性檔案進行呼叫。

通過全域性檔案的配置,我們對元件的呼叫從一對一呼叫變成了一對多呼叫。如下:

使用全域性變數前,我們只能通過以下形式呼叫

現在我們可以通過:class的形式呼叫的多種形態,如下:

註冊
當然,我們還需要在元件內部定義好:class部分,配置如下:

合理使用 slot 插槽,例如:元件內嵌元件,元件內嵌文字,內嵌 iconfont 等;

一分鐘sed入門(一分鐘系列)

1.簡介 sed是一種行編輯器,它一次處理一行內容。2.sed呼叫方式 sed options command file s sed options f scriptfile file s 第一種直接在命令列中執行,第二種把命令寫到了指令碼中,二者無本質區別。示例 1 列印hello.txt的內容 ...

一分鐘看懂mysql 一分鐘,看懂易貨

從20世紀80年代開始,易貨公司在美國加拿大 澳大利亞等國興起,成為這些國家減少現金用量 增加銷售 減少庫存 開發新客戶 開闢新市場 促進經濟發展的重要產業。也成為了企業消化庫存商品 剩餘生產能力 無形資產的有效方式和在遭遇資金瓶頸時的新選擇。2015年以來,中國線下易貨店開始了矇眼狂奔,在河南南陽...

抱我一分鐘好嗎

老公,抱我一分鐘,好嗎?她穿著白色的睡衣站在那裡,眼中滿是期待的神色。他坐在電腦前,轉過頭望著她,心中不禁一陣蕩漾。從座位上站起身,他張開雙臂將她擁入懷中。都快一點了,怎麼還不睡?她將頭深深埋在他的懷中,語氣中多了一絲委屈 老公,你好久都沒有抱過我了。他摟緊了她,緊得一絲空隙都沒有,緊得,似乎永遠都...