成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

第二集: 從零開始實(shí)現(xiàn)一套pc端vue的ui組件庫(kù)(icon組件)

wua_wua2012 / 500人閱讀

摘要：第二集從零開始實(shí)現(xiàn)組件本集定位這套組件我本來(lái)是先從做的但是我發(fā)現(xiàn)每個(gè)組件都要用到這個(gè)組件如果沒(méi)有他很多組件沒(méi)法擴(kuò)展而且本身不依賴其他組件所以還是先把它作為本篇文章的重點(diǎn)吧組件讀過(guò)源碼的同學(xué)都知道他們選擇的是字體圖標(biāo)的方式來(lái)做組件的而我的這

第二集: 從零開始實(shí)現(xiàn)(icon組件)

本集定位:
這套u(yù)i組件我本來(lái)是先從button做的, 但是我發(fā)現(xiàn)每個(gè)組件都要用到icon這個(gè)組件, 如果沒(méi)有他, 很多組件沒(méi)法擴(kuò)展, 而且icon本身不依賴其他組件, 所以還是先把它作為本篇文章的重點(diǎn)吧.
icon組件
讀過(guò)element-ui源碼的同學(xué)都知道, 他們選擇的是字體圖標(biāo)的方式來(lái)做icon組件的, 而我的這套u(yù)i在寫法與用法上參考了他們的做法, 但組件本身是靠svg來(lái)書寫的,其中的區(qū)別還是簡(jiǎn)單闡述一下把.
icon font 與 svg

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

2.icon font主要在頁(yè)面用Unicode符號(hào)調(diào)用對(duì)應(yīng)的圖標(biāo)，這種方式不管是瀏覽器，搜索引擎和對(duì)無(wú)障礙方面的能力都沒(méi)有SVG好.

3.icon font采用的是字體渲染，icon font在一倍屏幕下渲染效果并不好，在細(xì)節(jié)部分鋸齒還是很明顯的，SVG上面我說(shuō)過(guò)它是圖形所以在瀏覽器中使用的是圖形渲染，所以SVG卻沒(méi)有這種問(wèn)題.

4.兼容性較差，支持 ie9+,及現(xiàn)代瀏覽器.

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

行動(dòng)起來(lái)
上一集基本環(huán)境已經(jīng)搭建好了, 這里我們采用"bem"的思想, 來(lái)構(gòu)建組件的樣式, 所有的樣式抽離在一個(gè)文件夾里面, 做到組件本身沒(méi)有樣式代碼,我們來(lái)先書寫組件的代碼.結(jié)構(gòu)如下:

index.js文件里面是導(dǎo)出這個(gè)組件:

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

export default Icon

這樣單抽出來(lái)做一個(gè)文件的好處是,更好的工程化, 保證職能的單一性.

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

icon.vue文件

第一步: 使用svg, 當(dāng)然要去下載svg圖片了, 本篇推薦使用大家都在用的阿里巴巴矢量圖標(biāo)庫(kù),選擇自己喜歡的圖標(biāo)放入購(gòu)物車選項(xiàng).

第二步: 放入工程,點(diǎn)擊添加入項(xiàng)目, 如果沒(méi)有項(xiàng)目要點(diǎn)擊新建項(xiàng)目來(lái)完成此操作.

第三步: 復(fù)制鏈接到你的script標(biāo)簽里面引入, 在index.html里面就可以, 下面會(huì)講遇到的問(wèn)題與優(yōu)化.

// 使用方法如下:

// 把名字寫在下面的"xxx"處,就可以正常顯示圖標(biāo)了;

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

1:先定義一個(gè)最簡(jiǎn)單的組件模板, 他僅僅支持顏色的調(diào)整, 與icon的調(diào)整

2:svg的顏色控制, 需要通過(guò)fill屬性, 我經(jīng)常面試遇到說(shuō)自己用過(guò)svg圖片, 但是沒(méi)聽說(shuō)過(guò)fill屬性的尷尬場(chǎng)面

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/114498.html

相關(guān)文章

  • 第二集: 從零開始實(shí)現(xiàn)一套pc端vue的ui組件庫(kù)(icon組件)

    摘要：第二集從零開始實(shí)現(xiàn)組件本集定位這套組件我本來(lái)是先從做的但是我發(fā)現(xiàn)每個(gè)組件都要用到這個(gè)組件如果沒(méi)有他很多組件沒(méi)法擴(kuò)展而且本身不依賴其他組件所以還是先把它作為本篇文章的重點(diǎn)吧組件讀過(guò)源碼的同學(xué)都知道他們選擇的是字體圖標(biāo)的方式來(lái)做組件的而我的這 第二集: 從零開始實(shí)現(xiàn)(icon組件) 本集定位: 這套u(yù)i組件我本來(lái)是先從button做的, 但是我發(fā)現(xiàn)每個(gè)組件都要用到icon這個(gè)組件, 如...

    dack 評(píng)論0 收藏0

  • 第十二集: 從零開始實(shí)現(xiàn)一套pc端vue的ui組件庫(kù)( jest單元測(cè)試 )

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

    Yangder 評(píng)論0 收藏0

  • 第四集: 從零開始實(shí)現(xiàn)一套pc端vue的ui組件庫(kù)(button組件其二)

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

    趙春朋 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

wua_wua2012

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<