第二集: 從零開始實現一套pc端vue的ui組件庫(icon組件)

dack 發布于2019-08-23 17:02 / 1367人閱讀

摘要：第二集從零開始實現組件本集定位這套組件我本來是先從做的但是我發現每個組件都要用到這個組件如果沒有他很多組件沒法擴展而且本身不依賴其他組件所以還是先把它作為本篇文章的重點吧組件讀過源碼的同學都知道他們選擇的是字體圖標的方式來做組件的而我的這

第二集: 從零開始實現(icon組件)

本集定位:
這套ui組件我本來是先從button做的, 但是我發現每個組件都要用到icon這個組件, 如果沒有他, 很多組件沒法擴展, 而且icon本身不依賴其他組件, 所以還是先把它作為本篇文章的重點吧.
icon組件
讀過element-ui源碼的同學都知道, 他們選擇的是字體圖標的方式來做icon組件的, 而我的這套ui在寫法與用法上參考了他們的做法, 但組件本身是靠svg來書寫的,其中的區別還是簡單闡述一下把.
icon font 與 svg

1.icon font做為字體無法支持多色圖形，這就很尷尬了.

2.icon font主要在頁面用Unicode符號調用對應的圖標，這種方式不管是瀏覽器，搜索引擎和對無障礙方面的能力都沒有SVG好.

3.icon font采用的是字體渲染，icon font在一倍屏幕下渲染效果并不好，在細節部分鋸齒還是很明顯的，SVG上面我說過它是圖形所以在瀏覽器中使用的是圖形渲染，所以SVG卻沒有這種問題.

4.兼容性較差，支持 ie9+,及現代瀏覽器.

5.瀏覽器渲染svg的性能一般，還不如png。

行動起來
上一集基本環境已經搭建好了, 這里我們采用"bem"的思想, 來構建組件的樣式, 所有的樣式抽離在一個文件夾里面, 做到組件本身沒有樣式代碼,我們來先書寫組件的代碼.結構如下:

index.js文件里面是導出這個組件:

import Icon from "./main/icon.vue"
// 明白vue.use方法原理的同學都能明白這段代碼的意義
// 當被use的時候, 進行icon組件的渲染
Icon.install = function(Vue) {
  Vue.component(Icon.name, Icon);
};

export default Icon

這樣單抽出來做一個文件的好處是,更好的工程化, 保證職能的單一性.

main文件夾
為什么main文件夾里面只有一個文件還要多帶帶抽成一個文件夾??, 原因是有的組件可能要配合自己獨有的容器組件一起使用, 比如一個button的包裹容器, 他可以讓內部的每個button有相同的上下左右距離, 相同的圓角等等...

icon.vue文件

第一步: 使用svg, 當然要去下載svg圖片了, 本篇推薦使用大家都在用的阿里巴巴矢量圖標庫,選擇自己喜歡的圖標放入購物車選項.

第二步: 放入工程,點擊添加入項目, 如果沒有項目要點擊新建項目來完成此操作.

第三步: 復制鏈接到你的script標簽里面引入, 在index.html里面就可以, 下面會講遇到的問題與優化.

// 使用方法如下:

第四步: 開始正式書寫組件.

1:先定義一個最簡單的組件模板, 他僅僅支持顏色的調整, 與icon的調整

2:svg的顏色控制, 需要通過fill屬性, 我經常面試遇到說自己用過svg圖片, 但是沒聽說過fill屬性的尷尬場面

GPU云服務器云服務器 Icon 組件 Icon組件 vue組件 ui組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103705.html

第二集: 從零開始實現一套pc端vue的ui組件庫(icon組件)

摘要：第二集從零開始實現組件本集定位這套組件我本來是先從做的但是我發現每個組件都要用到這個組件如果沒有他很多組件沒法擴展而且本身不依賴其他組件所以還是先把它作為本篇文章的重點吧組件讀過源碼的同學都知道他們選擇的是字體圖標的方式來做組件的而我的這第二集: 從零開始實現(icon組件) 本集定位: 這套ui組件我本來是先從button做的, 但是我發現每個組件都要用到icon這個組件, 如...

wua_wua2012 2019-08-29 18:41 評論0 收藏0
第十二集: 從零開始實現一套pc端vue的ui組件庫( jest單元測試 )

摘要：第十二集從零開始實現單元測試聊聊測試本次我會與大家分享一下我學測試時候記的筆記知識以及本次項目里面做的幾個測試前端代碼的單元測試與集成測試屬于雷聲大雨點小很多人一提到它都說是個好東西試問又有幾個公司的項目是嚴格要求跑單元測試與集成測試的那測第十二集: 從零開始實現( jest單元測試 ) 1.聊聊測試 ????本次我會與大家分享一下我學測試時候記的筆記知識以及本次項目里面做的幾個測試...

Yangder 2019-08-26 10:46 評論0 收藏0
第四集: 從零開始實現一套pc端vue的ui組件庫(button組件其二)

摘要：第四集從零開始實現組件本集定位之前一直在忙別的事情現在終于閑下來好好把這個庫的文章寫一下本篇目的是承接上文把組件的功能全部實現為添加按鈕的很重要現在一般的按鈕都帶個圖案因為這樣符合人腦的快捷思維方便理解與記憶圖標按鈕第四集: 從零開始實現(button組件2) 本集定位: 之前一直在忙別的事情, 現在終于閑下來, 好好把這個庫的文章寫一下本篇目的是承接上文, 把button組...

趙春朋 2019-08-26 10:14 評論0 收藏0