title: 总结制作NavMenu导航菜单组件时遇到的问题date: 2018-03-23 14:22:51
tags: common

基于Element的NavMenu

1.下拉导航栏的实现

1.1.导航栏横向排列

  1. 在一级li标签的样式上作用此语句，即可实现横向顶端导航栏。
  1. float: left;

1.2.二级下拉菜单实现隐藏效果

  1. 在二级ul标签的样式上作用此语句。
  1. display: none;

2.利用Vue.js中的v-for指令循环制作导航栏

  1. <el-menu
  2.          :default-active="activeIndex"
  3.          class="el-menu-demo m-menu-demo"
  4.          mode="horizontal"
  5.          @select="handleSelect"
  6.          background-color="rgba(255,255,255, 0)"
  7.          text-color="#fff"
  8.          active-text-color="#ffd04b">
  9.     <el-submenu :index="''+index_f" :key="index" v-for="(item_f, index_f) in nav">
  10.         <template slot="title"><a>{{item_f.first}}</a></template>
  11.         <el-menu-item :index="''+index_f+'-'+index_s" key="index"
  12.                       v-for="(item_s, index_s) in item_f.second"><a>{{item_s.name}}</a>
  13.         </el-menu-item>
  14.     </el-submenu>
  15. </el-menu>

2.1.v-for指令的使用

  1. 格式：item in items
  3. item: 指向的数组单元， items：数组名称
  5. 可以有多个item，比如(item,  index)中的item遍历内容，index遍历下标。
  7. 而下标的作用是在index属性中用于实现唯一性，让每个二级下拉菜单单独显示。

2.2.Json存储v-for遍历的data

2.2.1.Json文件的制作
  1.     Json 在线解析及格式化验证 [http://www.json.cn/](http://www.json.cn/)
  3.     制作好的.json文件放置于static静态文件夹中。

2.2.2.Json文件的使用

1.axios
  1.     基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 node.js 中使用
  3.     安装——使用npm
  1.     $ npm install axios
  1.     组件中引用axios
  1.     import axios from 'axios'

2.预置变量
  1.     在组件的data下要有接受数据的预置变量，如：
  1.     nav: []

3.回调函数
  1.     created() {
  2.         var _this = this;
  3.         this.$nextTick(function () {
  4.             _this.getData();
  5.         })
  6.     }

4.获取数据函数
  1.     getData() {
  2.         axios.get('/static/json/nav.json').then((res) => {
  3.             this.nav = res.data;
  4.         });
  5.     }

3.CSS调整NavMenu样式

3.1.二级下拉菜单透明

  1. 在el-menu标签（包裹着一级ul标签的div标签）上设置：
  1. background-color="rgba(255,255,255, 0)"
  1. 在二级ul标签上设置:
  1. background: rgba(255, 255, 255, 0.8);

3.2.二级下拉菜单宽度自适应

  1. 在二级ul标签上设置:
  1. min-width: initial;

3.3.二级下拉菜单阴影

  1. 在二级ul标签上设置:
  1. box-shadow: 0 1px 15px #818383;

3.4.在Element组件中修改设置CSS样式

3.4.1.!important
  1. 在index.html文件中引用CSS样式表，样式表内部直接对F12检查获得的Class名称对应的样式进行覆盖，注            意，需要使用!important，如：
  1. color: #fff !important;

3.4.2.style标签中设置
  1. 在对应组件中的style标签内设置class样式，再对对应的标签设置class，需要注意的是有些组件由于是封装好的，在解析以后出现的标签在解析之前是没有的，故不容易设置对应的样式，比如NavMenu。
  3. 当然，这种方式下设置css样式的优先级要比预设要高，不需要添加!important。

4.XGZX官网NavMenu源码

  1. <template>
  2.     <div>
  3.         <div class="header">
  4.             <router-link to="/" class="left"><img src="/static/left.png"/></router-link>
  5.             <div class="navbar">
  6.                 <el-menu
  7.                         :default-active="activeIndex"
  8.                         class="el-menu-demo m-menu-demo"
  9.                         mode="horizontal"
  10.                         @select="handleSelect"
  11.                         background-color="rgba(255,255,255, 0)"
  12.                         text-color="#fff"
  13.                         active-text-color="#ffd04b">
  14.                     <el-submenu :index="''+index_f" :key="index" 
  15.                                 v-for="(item_f, index_f) in nav">
  16.                         <template slot="title"><a>{{item_f.first}}</a></template>
  17.                         <el-menu-item :index="''+index_f+'-'+index_s" key="index"
  18.                                       v-for="(item_s, index_s) in item_f.second"><a>
  19.                                     {{item_s.name}}</a>
  20.                         </el-menu-item>
  21.                     </el-submenu>
  22.                 </el-menu>
  23.             </div>
  24.             <div class="right"><img src="/static/right.png"/></div>
  25.         </div>
  26.         <img src="/static/slide.png">
  27.     </div>
  28. </template>
  1. <script>
  2.     import axios from 'axios'
  4.     export default {
  5.         name: "CommonHeader",
  6.         data() {
  7.             return {
  8.                 activeIndex: '1',
  9.                 nav: []
  10.             };
  11.         },
  12.         created() {
  13.             var _this = this;
  14.             this.$nextTick(function () {
  15.                 _this.getData();
  16.             })
  17.         },
  18.         methods: {
  19.             handleSelect(key, keyPath) {
  20.                 console.log(key, keyPath);
  21.             },
  22.             getData() {
  23.                 axios.get('/static/json/nav.json').then((res) => {
  24.                     this.nav = res.data;
  25.                 });
  26.             }
  27.         }
  28.     }
  29. </script>
  1. <style scoped>
  2.     .header {
  3.         position: fixed;
  4.         background: #0e1856;
  5.         width: 100%;
  6.         height: 100px;
  7.         overflow: hidden;
  8.     }
  10.     .navbar {
  11.         position: absolute;
  12.         left: 300px;
  13.         bottom: 0;
  14.         min-width: 1100px;
  15.     }
  17.     .left {
  18.         position: absolute;
  19.         top: 20%;
  20.         left: 18px;
  21.         width: 200px;
  22.         height: auto;
  23.         margin: 0 30px;
  24.     }
  26.     .left img {
  27.         width: 100%;
  28.     }
  30.     .right {
  31.         position: absolute;
  32.         top: 15%;
  33.         right: 50px;
  34.         width: 300px;
  35.         height: auto;
  36.     }
  38.     .right img {
  39.         width: 100%;
  40.     }
  41. </style>
  1. index.html文件下引用的css样式（使用!important）
  1. /*
  2.     CommonHeader_el-menu
  3. */
  4. .el-menu-demo {
  5.     border-bottom-width: 0px !important;
  6. }
  8. .el-submenu__title {
  9.     font-size: 16px !important;
  10.     border-bottom-width: 0 !important;
  11.     padding: 0 20px !important;
  12.     color: #fff !important;
  13. }
  15. .el-submenu__title:hover {
  16.     color: #000 !important;
  17.     background: #fff !important;
  18. }
  20. i.el-icon-arrow-down {
  21.     display: none;
  22. }
  24. .el-menu-item {
  25.     text-align: center !important;
  26.     height: 40px !important;
  27.     font-size: 15px !important;
  28.     background: rgba(255, 255, 255, 0.8) !important;
  29.     color: #000 !important;
  30.     padding: 0 22px !important;
  31. }
  33. .el-menu-item a {
  34.     white-space: nowrap;
  35.     padding: 0;
  36. }
  38. .el-menu-item a:hover {
  39.     text-decoration: none;
  40. }
  42. .el-menu-item a:link {
  43.     text-decoration: none;
  44.     color: #000;
  45. }
  47. .el-menu-item a:visited {
  48.     text-decoration: none;
  49.     color: #000;
  50. }
  52. .el-menu-item:hover {
  53.     background: rgba(14, 24, 86, 0.8) !important;
  54.     color: #fff !important;
  55. }
  57. .el-menu--popup {
  58.     padding: 0 !important;
  59.     min-width: initial !important;
  60.     box-sizing: border-box;
  61.     box-shadow: 0 1px 15px #818383 !important;
  62. }
  64. .el-menu--popup-bottom-start {
  65.     margin-top: 0 !important;
  66. }