摘要：目標(biāo)中間一段空白把導(dǎo)航欄分為左右兩個(gè)部分在導(dǎo)航欄上加上一個(gè)搜索框，但不被的樣式污染。

本文需要對(duì)CSS，Vue，ElementUI有基本的了解。

本文以ElementUI提供的導(dǎo)航菜單組件為基礎(chǔ)。

本文希望能在此組件基礎(chǔ)上實(shí)現(xiàn)以下內(nèi)容：

中間一段空白把導(dǎo)航欄分為左右兩個(gè)部分

在導(dǎo)航欄上加上一個(gè)搜索框，但不被 el-menu-item 的樣式污染。

創(chuàng)建一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)，在其中使用ElementUI的導(dǎo)航菜單組件。

用Chrome之類的工具對(duì)網(wǎng)頁(yè)檢查（F12/Ctrl+Shift+I）后，從 Elements 標(biāo)簽頁(yè)中定位到導(dǎo)航菜單組件在網(wǎng)頁(yè)中最后的實(shí)現(xiàn)元素。在檢查工具下方有 Styles 工具會(huì)顯示選中的元素的相關(guān)樣式。提取其中對(duì)元素位置有影響以及我不太熟悉的屬性。

提取后發(fā)現(xiàn)有這些和元素位置相關(guān)的設(shè)置

margin: 0;
padding-left: 0;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;

border-bottom: solid 1px #color;
border-right: none;

display:block;
position: relative;
-webkit-box-direction: normal;

list-style:none;

//使用了::before和::after創(chuàng)建了偽元素（注意，不是偽類。）
::before {
    display: table;
    content: "";
}

::after {
    display: table;
    content: "";
    clear: both;
}

對(duì)于出現(xiàn)在以上代碼中的但不熟悉不確認(rèn)作用的屬性，以其為關(guān)鍵詞（記得加引號(hào)以避免搜索引擎錯(cuò)誤解析）加css進(jìn)行搜索，基本上就能找到滿意的答案。

margin-block-start 等屬性的作用 —— 影響不大

::before 和 ::after —— 偽類
clear:both
搞明白了這里為什么要使用一個(gè)::after的偽元素，可以預(yù)測(cè)該元素下的子元素全都是浮動(dòng)元素。因此如果放任不管的話，會(huì)造成浮動(dòng)元素的高度不被父元素計(jì)算而導(dǎo)致父元素高度為零直接崩掉。所以使用這樣一個(gè)偽類，由于這個(gè)偽類不能允許左右有浮動(dòng)元素，所以它會(huì)使自己的上外邊界碰著浮動(dòng)元素（理想狀況下應(yīng)該排成一行）的那一行的下邊界，而這一行的高度（也即浮動(dòng)元素的高度）就會(huì)被計(jì)算為父元素的高度了。實(shí)際上如果這個(gè)偽類自己有高度比如60px,浮動(dòng)元素那一行的最大高度為60px，則父元素的高度就會(huì)是120px了。

box-direction —— 影響不大

在解決了有問(wèn)題的樣式屬性后發(fā)現(xiàn)，其實(shí)整個(gè) el-menu 的最終實(shí)現(xiàn)很簡(jiǎn)單：使用positive:relative但并不帶有left top 這一類設(shè)置的屬性，所以說(shuō)元素還是留在原地。這里設(shè)置positive為relative的理由應(yīng)當(dāng)是輔助之后的子元素即導(dǎo)航欄內(nèi)部的 item 的定位（position:absolute時(shí)相對(duì)的元素若是position:static這一默認(rèn)值是會(huì)被無(wú)視的）。

float: left;
position: relative;
display: list-item;

margin: 0;
padding: 0 20px;
height: 60px;
line-height: 60px;
font-size:14px;
box-sizing: border-box;
text-align: -webkit-match-parent;

white-space: nowrap;
cursor: pointer;

float:left和display:list-item同時(shí)使用第一時(shí)間可能想不明白，但經(jīng)過(guò)自己創(chuàng)建更簡(jiǎn)單的樣例進(jìn)行測(cè)試，可以這么理解：float:left先執(zhí)行確定下自己的位置，然后執(zhí)行position:relative，即relative的相對(duì)定位相對(duì)的“原本的位置”是float:left之后的位置。而之類由于又沒(méi)有設(shè)置top left 之類的屬性，可以認(rèn)為這是為了在其內(nèi)部再放其它組件的話輔助定位用的。

display: list-item —— 從官方文檔來(lái)看意思就是說(shuō)配置這個(gè)list-item這個(gè)display屬性的元素表現(xiàn)出

的子元素
• 的樣式，從而可以為它配置list-style，并且這是在沒(méi)有
  這種display的父元素的基礎(chǔ)上的。實(shí)際上它的父元素也確實(shí)是display:block。

  white-space —— white-space CSS 屬性是用來(lái)設(shè)置如何處理元素中的空白。

  cursor —— cursor 屬性規(guī)定要顯示的光標(biāo)的類型（形狀）。

  那么最基本的兩個(gè)組件最終生成的元素的CSS已經(jīng)分析完了。動(dòng)手試試我們一開始的目標(biāo)吧。

  目標(biāo)

  中間一段空白把導(dǎo)航欄分為左右兩個(gè)部分

  在導(dǎo)航欄上加上一個(gè)搜索框，但不被 el-menu-item 的樣式污染。

  目標(biāo)1

  我的第一個(gè)想法是創(chuàng)建一個(gè) el-menu-item 給它寬度但是不給它內(nèi)容同時(shí)讓它disable="true"

  淘寶網(wǎng)
  
  登錄
  注冊(cè)
  
  #el-menu-item-placeholder1 {
      width: 80%;
  }

  在此狀態(tài)下創(chuàng)建的導(dǎo)航欄中間確實(shí)有了很大一塊空白作為區(qū)隔，但仍然有如下問(wèn)題:

  鼠標(biāo)懸停在空白上時(shí)因?yàn)?b>:disabled="true"導(dǎo)致鼠標(biāo)會(huì)變成一個(gè)禁止通行的圖標(biāo)。

  頁(yè)面縮小到1000px左右時(shí)就已經(jīng)會(huì)讓右邊的“登錄”“注冊(cè)”新開一行，把整個(gè)布局弄得很糟糕。

  對(duì)于第一個(gè)問(wèn)題，可以通過(guò)cursor屬性解決？設(shè)置cursor: default;于我們自定義的作為占位符的空白格 el-menu-item 樣式中，就解決了。

  對(duì)于第二個(gè)問(wèn)題，三個(gè)組件總共寬度為218px，占據(jù)20%的寬度，則要求100%寬度大于1090px才會(huì)不崩盤。所以可以設(shè)置 el-menu 的類的樣式解決這個(gè)問(wèn)題

  .el-menu {
      min-width: 1090px;
  }
  #el-menu-item-placeholder1 {
      width: 80%;
      max-width: 80%;
      cursor: default;
  }
  

  目標(biāo)2

  在解決目標(biāo)1的基礎(chǔ)上，其實(shí)已經(jīng)有了目標(biāo)2的思路：設(shè)置一個(gè):disable="true"的 el-menu-item 來(lái)放置一個(gè) el-input 輸入框。對(duì)這個(gè) el-menu-item 標(biāo)記 id 屬性，然后通過(guò)id選擇器設(shè)置cursor:default。

  實(shí)際測(cè)試時(shí)發(fā)現(xiàn)整個(gè)輸入框被導(dǎo)航欄的背景色給灰蒙蒙地上了一層。顯然這一副作用是由于將起禁用而導(dǎo)致的。（對(duì)比不禁用時(shí)的輸入框很正常）。所以用檢查工具查看此時(shí)的元素，發(fā)現(xiàn)其class屬性多了一個(gè)is-disabled，從而引入了 ElementUI 自帶的樣式中的 opacity: 0.25 才導(dǎo)致的。那通過(guò)id選擇器進(jìn)一步將其覆蓋即可。

  最終代碼如下：

  淘寶網(wǎng)
  
  
      
  
  
  登錄
  注冊(cè)
  
  .el-menu {
      min-width: 1090px;
  }
  #el-menu-item-placeholder1 {
      width: 80%;
      max-width: 80%;
      cursor: default;
  }
  #el-menu-item-searchinput-container {
      cursor: default;
      opacity: 1;
  }

  最初的兩個(gè)目標(biāo)基本都實(shí)現(xiàn)了。

  最后

  存一下自己寫的東西

  經(jīng)過(guò)這次經(jīng)歷，我算是有點(diǎn)理解到是人在用組件，而不是組件在用人。組件雖然說(shuō)是一個(gè)個(gè)已經(jīng)封裝好的成熟的，但絕大部分樣式最終實(shí)現(xiàn)還是依靠CSS。因此如果能抓住其最終實(shí)現(xiàn)的CSS樣式進(jìn)行解析，就能自己進(jìn)一步自定義化組件了。

  分析組件時(shí)要注意樣式變化時(shí)對(duì)應(yīng)元素的前后變化，比如被 disabled 的 el-menu-item 使得白白凈凈很好看的內(nèi)部的 el-input 蒙上了一層背景色，這個(gè)時(shí)候首先看 el-menu-item 是否多出和 disabled 這件事有關(guān)的樣式，然后去看 el-input 繼承的樣式而不必關(guān)心原本的樣式，因?yàn)樵镜谋憩F(xiàn)是正常的。

  是人用組件，而不是組件用人。