第二集：从头实现一套PC端Vue的ui组件库（图标组件）

绗簩闆嗭細浠庨浂寮€濮嬪疄鐜帮紙鍥炬爣缁勪欢锛夋湰闆嗗畾浣嶏細鎴戞湰鏉ユ槸浠庢寜閽紑濮嬪仛杩欏ui缁勪欢鐨勶紝缁撴灉鍙戠幇姣忎竴涓粍浠堕兘闇€瑕佺敤鍒板浘鏍囩粍浠躲€傛病鏈夊畠锛岃澶氱粍浠跺皢鏃犳硶浣跨敤銆備笉鑳芥墿灞曪紝鍥炬爣鏈韩涓嶄緷璧栧叾浠栫粍浠讹紝鎵€浠ュ厛鎶婂畠浣滀负鏈枃鐨勯噸鐐广€傜湅杩噀lement-ui鍥炬爣缁勪欢婧愮爜鐨勫悓瀛﹂兘鐭ラ亾锛屼粬浠€夋嫨瀛椾綋鍥炬爣鍋氬浘鏍囩粍浠讹紝鎴戠殑ui鍦ㄥ啓娉曞拰浣跨敤涓婂弬鑰冧簡浠栦滑鐨勫仛娉曪紝浣嗘槸缁勪欢鏈韩鏄痵vg鍐欑殑锛屼笉鍚屼箣澶勭畝鍗曡鏄庝竴涓嬶紝浣跨敤.icon瀛椾綋鍜宻vg1.icon瀛椾綋浣滀负瀛椾綋涓嶈兘鏀寔寰堝Color鍥惧舰锛屽緢灏村艾銆?.icon瀛椾綋涓昏鏄娇鐢║nicode绗﹀彿鏉ヨ皟鐢ㄩ〉闈笂鐩稿簲鐨勫浘鏍囥€傝繖绉嶆柟娉曞湪娴忚鍣ㄣ€佹悳绱㈠紩鎿庡拰鍙闂€ф柟闈笉濡係VG銆?.鍥炬爣瀛椾綋浣跨敤瀛椾綋娓叉煋锛屽浘鏍囧瓧浣撳湪鍙屽睆涓嬫覆鏌撴晥鏋滀笉浣筹紝缁嗚妭澶勯敮榻挎劅渚濈劧鏄庢樉銆備笂闈㈡彁鍒癝VG鏄浘褰紝鎵€浠ュ湪娴忚鍣ㄤ腑浣跨敤鍥惧舰娓叉煋锛屾墍浠VG鏄笉瀛樺湪杩欎釜闂鐨勩€?.鍏煎鎬у樊锛屾敮鎸乮e9+锛屽強鐜颁唬娴忚鍣ㄣ€?銆佹祻瑙堝櫒娓叉煋svg鎬ц兘涓€鑸紝涓嶅png銆備笂涓€闆嗙殑鍩烘湰鐜宸茬粡鎼ソ浜嗐€傝繖閲屾垜浠娇鐢?bem'鐨勬€濇兂鏉ユ瀯寤虹粍浠剁殑鏍峰紡銆傛墍鏈夋牱寮忛兘鍗曠嫭鏀惧湪涓€涓枃浠跺す涓紝浣跨粍浠舵湰韬病鏈夋牱寮忎唬鐮併€傛垜浠厛鍐欑粍浠剁殑浠ｇ爜銆傜粨鏋勫涓嬶細index.js鏂囦欢鏄鍑鸿繖涓粍浠讹細importIconfrom'./main/icon.vue'//浜嗚Вvue.use鏂规硶鍘熺悊鐨勫悓瀛﹀彲浠ョ悊瑙ｈ繖娈典唬鐮佺殑鎰忔€?/When浣跨敤鏃讹紝娓叉煋鍥炬爣缁勪欢銆侷con.install=function(Vue){Vue.component(Icon.name,Icon);};exportdefaultIcon杩欐牱鎻愬彇鍗曚釜鏂囦欢鐨勫ソ澶勬槸淇濊瘉鍔熻兘鐨勫崟涓€鎬ф槸涓€涓瘮杈冨ソ鐨勫伐绋嬨€備负浠€涔堜富鏂囦欢澶逛腑鍙湁涓€涓枃浠讹紝闇€瑕佸皢鍏舵彁鍙栧埌涓€涓崟鐙殑鏂囦欢澶逛腑锛燂紵鍘熷洜鏄湁浜涚粍浠跺彲鑳介渶瑕佸拰鑷繁鐗规湁鐨勫鍣ㄧ粍浠朵竴璧蜂娇鐢紝姣斿涓€涓寜閽皝瑁呭鍣紝浠栧彲浠ヨ閲岄潰鐨勬瘡涓寜閽湁鐩稿悓鐨勪笂涓嬪乏鍙宠窛绂伙紝鐩稿悓鐨勫渾瑙掔瓑绛?..icon.vue鏂囦欢绗竴姝ワ細浣跨敤svg锛屽綋鐒堕渶瑕佷笅杞絪vg鍥剧墖鍦ㄨ繖閲屻€傛湰鏂囨帹鑽愪娇鐢ㄥぇ瀹堕兘鍦ㄧ敤鐨勯樋閲屽反宸寸煝閲忓浘鏍囧簱銆傞€夋嫨鎮ㄥ枩娆㈢殑鍥炬爣骞跺皢鍏舵斁鍏ヨ喘鐗╄溅閫夐」銆係tep2锛氭斁鍏ラ」鐩紝鐐瑰嚮娣诲姞杩涘叆椤圭洰锛屽鏋滄病鏈夐」鐩紝鐐瑰嚮鏂板缓椤圭洰瀹屾垚鏈鎿嶄綔銆傜3姝ワ細灏嗛摼鎺ュ鍒跺埌鎮ㄧ殑鑴氭湰鏍囩骞跺皢鍏跺鍏ュ埌index.html涓€傞亣鍒扮殑闂鍜屼紭鍖栦細鍦ㄤ笅闈㈣璁恒€?/浣跨敤鏂规硶濡備笅锛?svgclass="icon">//鍦ㄤ笅闈㈢殑'xxx'涓啓涓婂悕瀛楋紝鍥炬爣鍙互姝ｅ父鏄剧ず锛?usexlink:href="#icon-xxx">绗洓姝ワ細姝ｅ紡寮€濮嬬紪鍐欑粍浠躲€?锛氬厛瀹氫箟涓€涓渶绠€鍗曠殑缁勪欢妯℃澘锛屽彧鏀寔棰滆壊璋冩暣锛屽拰icon璋冩暣2锛歴vg鐨勯鑹叉帶鍒堕渶瑕侀€氳繃fill灞炴€с€傜粡甯稿湪闈㈣瘯涓亣鍒帮紝璇寸敤杩噑vg鍥剧墖锛屼絾鏄病鍚杩囦紶fill灞炴€х殑灏村艾鍦洪潰馃3锛氫笉浼燾olor鏃讹紝svg榛樿鍘熻壊绗簲姝ワ細鍩烘湰缁撴瀯宸茬粡鍒颁綅锛岀幇鍦ㄦ垜浠渶瑕佽€冭檻鎴戜滑鐨勭粍浠堕渶瑕佷粈涔堝姛鑳斤紵.1锛氭帶鍒跺浘鏍囩殑澶у皬锛岃繖涓繕鏄繀椤荤殑props:{//鎺ュ彈涓€涓猻ize灞炴€ize:{//鍥犱负鐢ㄦ埛鍙兘passthetypewithorwithouttheunit:[Number,String],default:"1em"}},computed:{//鍦ㄨ绠楀睘鎬т腑瀵硅繖涓€艰繘琛屾搷浣滐紝濡傛灉绫诲瀷鏄暟瀛楋紝璁╂垜浠粰瀹冨姞涓婁竴涓崟浣嶏紝鍗抽粯璁ゅ崟浣嶄负'px'iconSize(){if(typeofthis.size==="number")returnthis.size+"px";鍚﹀垯杩斿洖this.size锛泒}2锛氬鏋滄槸鍔犺浇鐨勫浘鏍囷紝鎴戜滑闇€瑕佹棆杞竴涓嬶紝鎴戣繖閲屾槸do锛屾墍鏈夌殑鍔犺浇鍥炬爣锛屾垜鐨勫悕瀛楅兘鏄姞杞藉姞鏁板瓧锛屾墍浠ュ彧瑕佹鏌ュ瓧绗︿覆涓槸鍚︽湁杩欎釜鍏抽敭瀛?svg:style="{fill:color}":class="['cc-icon-'+name,{//icon-loading鏄竴涓被鍚嶏紝鍙湁鍦╥con鐨刵ame灞炴€т腑鏈塴oad瀛楁鐨勬椂鍊欐墠鍔犱笂銆傛灞炴€у悕绉颁腑鐨勫睘鎬ф槸鏃嬭浆銆傗€榽鈥欎綅杩愮畻绗︽槸涓€绉嶉潪甯搁珮鏁堢殑鍐欐硶锛屽嵆瀵归綈璐熸暟锛?鍒?锛?鍒?锛屼篃灏辨槸姹備簩杩涘埗鐨勮ˉ鐮侊紝杩欓噷涓嶆噦鐨勭湅鐘€鐗涗功棣栧厛锛岀畝鍗曞湴灏?1鏀惧叆0锛屽苟鍦˙oolean涓彉涓篺alse锛?icon-loading':~name.indexOf('load')}]">3:瀹為檯浣跨敤鍦ㄩ偅娆″彂鐜癲iv涓嶅姞display:'inline-flex'灞炴€у拰icon鏈夋椂鍊欎細涓嶆暣榻愶紝杩樻槸鍔犱竴涓嬫瘮杈冨ソ锛岃繖涓湴鏂逛互鍚庡簲璇ュ仛锛屽苟涓旀劅瑙変互鍚庤繕浼氬涓€涓晠浜嬨€?divclass='cc-icon':style="{display:'inline-flex',height:iconSize,width:iconSize,}">4锛氭帴涓嬫潵灏辨槸璁剧疆鍥炬爣鍖归厤disabled鍏朵粬缁勪欢鐨勭姸鎬佷篃鏄伆鑹茬殑锛岃繖鏍峰啓寰堟柟渚?svg:style="{fill:color}":class="['cc-icon-'+name,{'icon-loading':~name.indexOf('load'),'is-disabled':disabled//瀹氫箟鍦ㄨ繖閲寎]">props:{disabled:Boolean//褰撶劧鏄疊oolean绫诲瀷}锛屽皬鐭ヨ瘑鐐癸細props涓粯璁ょ被鍨嬪畾涔変负Boolean锛岄偅涔堢敤鎴峰彲浠ョ洿鎺ュ湪鏍囩涓婂啓灞炴€у悕锛屽氨鍙互浜嗗彲浠ュ湪涓嶇粰灞炴€у€肩殑鎯呭喌涓嬭〃绀簍rue锛屼絾榛樿涓嶆槸Boolean锛屽鏋滀笉缁欏睘鎬у€硷紝缁勪欢灏嗗緱鍒皍ndefined锛涚鍏锛氱紪鍐欐牱寮廼con.scss鏂囦欢1锛氱鐢ㄧ姸鎬佷笅绂佺敤鐐瑰嚮2锛氬浘鏍囧姞杞芥椂鏃嬭浆@import'./common/mixin.scss';@import"./common/animation.scss";@includeb(icon){.#{$state-prefix}disabled{cursor:not-allowed;濉厖锛?--棰滆壊绂佺敤锛泒.icon-loading{鍔ㄧ敾锛氭棆杞?s鏃犻檺绾挎€э紱}}mixin.scss鏂囦欢涓殑b鏂规硶鎶借薄鍑?namespace鏂逛究绠＄悊@mixinb($block){$B:$namespace+'-'+$block!global;.#{$B}{@content;}}animation.scss鏂囦欢@keyframesrotating{0%{transform:rotateZ(0deg);}100%{鍙樻崲锛歳otateZ(360deg);}}var.scss鏂囦欢//lulu鐨勮壓鏈苟涓嶅ソ锛屽彧鏄兂鍋氫竴浜涗笉鍚岀殑涓滆タ鏉ョ帺//鍩烘湰棰滆壊$--color-black:#000000!default;$--color-white:#FFFFFF!default;//鍩烘湰棰滆壊鏄槑浜殑$--color-nomal:#409EFF!default;$--color-success:#7CCD7C!default;$--color-warning:#FFB90F!default;$--color-danger:#FF0000!default;$--color-disabled:#bbbbbb!default;$--color-difference:#F5F7FA!default;//瀛椾綋$--size-big:16px;$--size-nomal:15px;$--size-small:14px;//杈撳叆妗?--color-input-placeholder:#aaa绗叚姝ワ細瀵逛笂闈㈡彁鍒扮殑svg鏂囦欢鍙傝€冪殑鏀硅繘锛屽彲浠ユ妸svg鏂囦欢涓嬭浇鍒版湰鍦帮紝鍜屽叾浠栦汉涓嶄細鍥犱负杩欎釜ui缁勪欢鑰屽紩鐢╥ndex.html鏂囦欢锛屽ぇ閮ㄥ垎缁勪欢閮芥槸寮曠敤icon銆傛垜浠彲浠ュ幓闃块噷宸村反鐭㈤噺鍥炬爣搴撴搷浣滅偣鍑讳笅杞藉埌鏈湴鍙栧嚭js鏂囦欢锛岃鏈湴浣跨敤index.js鏂囦欢寮曠敤杩欎釜js鏂囦欢灏辨悶瀹氫簡锛侊紒鍥炬爣缁勪欢鏄渶灏忕殑缁勪欢锛屽叾浠栫粍浠剁殑浠ｇ爜閲忓拰澶у皬閮借澶у緢澶氥€傝缁嗕唬鐮佸拰浣跨敤鏂规硶鍙互璁块棶涓嬮潰鍦板潃锛宯pm浼氬悓姝ユ洿鏂帮紒涓嬫湡鏄叧浜庢寜閽殑锛屼竴璧蜂氦娴乬ithub锛氶」鐩湴鍧€涓汉鍗氬锛氫釜浜哄崥瀹?/p>