Vue 應用系列筆記 （四） 引入Element做佈局

終於是走向正題，引入業務使用的ui組件，Element，也是餓了麼開放的組件，屁不多放，開始引入

具體的安裝工作應用傳送門

採用版本：[email protected]

 

開發工具：WebStorm

 

引入sass支持，sass拓展語法寫css特別方便

cnpm install sass-loader@latest
​
cnpm install node-sass@latest

 

佈局部分

一、頁面佈局

通常爲左-上-內容，三等分，如圖

當然可以根據自己需要，來進行調整 佈局傳送門

 

①基本佈局

形成上方的佈局，只需要跟着官方文檔，就能拼接出來

<el-container class="page-container">
    <el-aside>        
    </el-aside>    
    <el-container>        
        <el-header>        
        </el-header>        
        <el-main>            
          <router-view />    //存放頁面展示的地方
        </el-main>    
    </el-container>
</el-container>

 

②樣式調整

如果什麼都不預先調整，頁面只能是佔一部分，無法全佔比，我們可以嘗試在main.js中引用公共樣式來修正這個問題；

 

//main.js
import './style/common.scss'th:100%;  height:100%;  margin: 0;}

//common.scss
//用以綻開全屏
html,body,#app{  width:100%;  height:100%;  margin: 0;}
//用以關掉不必要的滑動條，可以不加
::-webkit-scrollbar-track-piece {
  background-color: transparent;
}
::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  border-radius: 0px;
  background-color: hsla(220, 4%, 58%, .3);
}

這樣，一個基本的模版佈局就出來了。

 

二、左側導航欄

①引入NavMenu

現成的導航欄，我們其實已經可以直接拷過來，但是這裏存在問題，每一個層級都要寫進去。這樣遍歷是無法處理多重結構的，總不能一直自己疊加，這時候就要用到組件的遞歸調用了。

②菜單格式的確定

首先是確定，菜單的格式，影響下方菜單的制定，下方是簡單制定的json傳入格式

 {
     "children": [],
     "href": "/test",
     "icon": "el-icon-star-off",
     "id": "1",
     "label": "測試",
     "parentId": "0"
 }

 

③組件的自我遞歸

第一層 <el-menu> 毋庸置疑是必須的，無法預測的是子菜單中層級的數量，則這個層級可以作爲父組件，向下傳值，讓不確定的子組件進行自我遞歸。

   // menu/index.vue
   <el-menu
            style="height: 100%"
            :default-active="$route.path" 
            :show-timeout="200"
            background-color="#00142a"
            text-color="hsla(0,0%,100%,.65)"
            active-text-color="#409eff"
            :collapse="isCollapse">
        <child-menu :menu="menu" :isCollapse="isCollapse"/>
    </el-menu>

 

對於子組件：

1、首先是需要判斷是否本身就已經沒有子菜單，沒有則本身就屬於一個鏈接菜單<el-menu-item>，有則是需要進入 <submenu> 組件，生成子菜單 A,

2、 這個子菜單A又需要進行判斷，是否存在子菜單，若不存在則可以歸類爲<el-menu-item>，若存在，我們又要進行這兩個步驟循環

3、這時候我們就需要用到 vue 中name的用法了，重複代碼不需要一直疊加下去，要利用name屬性進行自我調用

//   menu/child-menu.vue
<template v-for="(item,index) in menu">
<el-menu-item v-if="item.children.length==0"
              :index="item.label"
              @click="open(item)"
              :key="item.label">
    <i :class="item.icon"/>
    <span slot="title">{{item.label}}</span>
    </el-menu-item>
<el-submenu v-else
            :index="item.label"
            :key="item.label">
    <!-- 側邊欄標題 -->
    <template slot="title">
        <span slot="title" >
            <i :class="item.icon"/>{{item.label}}
    </span>
</template>
<!-- 側邊欄子項目 -->
<template v-for="(child,cindex) in item.children">
<el-menu-item
              :index="child.id"
              @click="open(child)"
              v-if="child.children.length==0"
              :key="child.label">
    <span slot="title"> <i :class="child.icon"/>{{child.label}}</span>
    </el-menu-item>
<child-menu v-else
            :menu="[child]"
            :key="cindex"
            :isCollapse="isCollapse"/>
</template>
</el-submenu>
</template>

········
name:"childMenu"

 

①上述open(是用於模擬打開路由的)

②slot="title",引用官方： 【通過 el-menu-item-group 組件可以實現菜單進行分組，分組名可以通過title屬性直接設定，也可以通過具名 slot 來設定。】

③遞歸重新調用自己的時候 ，加上[]，是因爲遞歸的時候是數組，而傳入的是對象，要轉換一下類型