国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

wua_wua2012 / 493人閱讀

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

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

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

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

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

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

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

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

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

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

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

icon.vue文件

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

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

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

// 使用方法如下:

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

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

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

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

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

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

相關(guān)文章

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

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

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

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

    摘要：第十二集從零開始實(shí)現(xiàn)單元測(cè)試聊聊測(cè)試本次我會(huì)與大家分享一下我學(xué)測(cè)試時(shí)候記的筆記知識(shí)以及本次項(xiàng)目里面做的幾個(gè)測(cè)試前端代碼的單元測(cè)試與集成測(cè)試屬于雷聲大雨點(diǎn)小很多人一提到它都說是個(gè)好東西試問又有幾個(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組件庫(button組件其二)

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

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

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

0條評(píng)論

wua_wua2012

男|高級(jí)講師

TA的文章

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