vue中封装菜单栏Menu组件

在前端开发过程中我们可能会遇到设计图中所需的组件与组件库的样式不符合，就需要自己动手造轮子，下面以menu菜单栏（横项）为例，展开教学

html实现自定义的Menu菜单栏组件，首先我们需要考虑的有如下几点：

1. 选中高亮底部条
2. 切换子组件时菜单项的选中
3. 刷新页面时菜单项的选中

实现代码：

<div v-for="(item,index) in navList" :key="item.name">
    <div
        class="navItem"
        @click="go(item.path, index)"
        :class="navIndex === index ? 'activeItem' : ''"
    >{{ item.name }}</div>
</div>

首先用for循环遍历出菜单列表，类名使用动态类名去判断选中项

.navItem {
    cursor: pointer;
    padding: 0 30px;
    font-size: 18px;
    font-weight: 500;
    color: #051128;
    line-height: 75px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

每个菜单项都是一个独立的块元素，为了实现字体居中，这里用到了flex布局

.activeItem {
   color: #3894fb;
}
.activeItem:after {
    content: '';
    position: absolute;
    top: auto;
    bottom: 0;
    right: auto;
    height: 5px;
    width: 40px;
    border-radius: 2px;
    background-color: #3895FB;
}

选中项单独高亮样式处理，底部条使用了伪类，具体根据设计需求来定，这里我们是因为要实现一个圆角矩形的底部条

beforeMount() {
  this.watchRoute(this.$route.path)
},
methods: {
   watchRoute(newVal){
       this.navList.forEach((item,index) => {
           if(newVal.indexOf(item.path) != -1){
               this.navIndex = index
           }
       })
   },
}
watch: {
    // 监听路由变化修改顶部栏选中项
    "$route.path": function(newVal, oldVal) {
        console.log(`new_path = ${newVal}, old_path = ${oldVal}`);
        this.watchRoute(newVal)
    },
    immediate: true,
    deep: true
}

这里监听了路由的变化、进入页面时路由的检查