电商项目-主页

头部效果如下：

头部主要包含图片、文字、退出按钮
首先进行布局

在

侧边栏效果如下：
放开的效果

缩进去的效果

在中

               
|||
               
               
                   
                
                    
                  
                
                  
                
                    
               
             
            
           

说明：
1.isCollapse ? '64px' : '200px' 制作了|||来控制侧边的缩放，放开时是200px，缩的时候是64px
2.@click="toggleCollapse" 点击触发缩放
3.unique-opened是否保持子菜单的展开，默认是true，可以写成:unique-opened="true"
4.collapse="isCollapse"是否水平折叠收起菜单,这是下面定义的方法决定
5.collapse-transition="false" 是否开启折叠动画,在折叠时会有折叠动画影响视觉
6.router是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转
7.:index="item.id+''" v-for="item in menulist" :key="item.id"
根据后端传过来的说数据，通过v-for进行循环，通过id定位
8.{{item.authName}}authName是里面具体的定位
9.:index="'/'+subItem.path" v-for="subItem in item.children" :key="subItem.id" 二级标题需要调转到另一个网页，用id命名不好，所以选择path
10.iconsObj[item.id] 一级标题的前面的小图标用id显示。

在

export default {
    data(){
        return{
            //左侧菜单数据
            menulist: [],
            iconsObj:{
                "125":'iconfont icon-user',
                "103":'iconfont icon-tijikongjian',
                "101":'iconfont icon-shangpin',
                "102":'iconfont icon-danju',
                "145":'iconfont icon-baobiao'
            },
            //是否折叠
            isCollapse: false
        }
    },
    created(){
        this.getMenuList()
    },
    methods: {
        logout(){
            window.sessionStorage.clear();
            this.$router.push("/login");
        },
        //获取所有菜单
        async getMenuList(){
           const{data:res} = await this.$http.get('menus')
           if(res.meta.status != 200) return this.$message.error(res.meta.msg)
           this.menulist = res.data
           console.log(res)
        },
        
        //点击按钮，切换菜单的折叠与展开
        toggleCollapse(){
            this.isCollapse = !this.isCollapse
        }
    }
}

制作最上面的缩放按钮

.toggle-button {
    background-color: #4A5064;
    font-size: 10px;
    line-height: 24px;
    color: #fff;
    text-align: center;//居中
    letter-spacing: 0.2em;//三根数线的距离
    cursor: pointer;//触发是鼠标是小手
}

⚠️用到的组件都要在element.js中添加。