Mock快速入门使用及组件构造首页2

简介: Mock快速入门使用及组件构造首页2

二.组件构造首页导航栏和左侧菜单栏

1.将所有组件导入src/components中

资料放在顶部资源中哦

2.配置路由关系

在src/router/index.js中配置

import AppMain from '@/components/AppMain'
import LeftNav from '@/components/LeftNav'
import TopNav from '@/components/TopNav'
{
      path: '/AppMain',
      name: 'AppMain',
      component: AppMain
    },
    {
      path: '/LeftNav',
      name: 'LeftNav',
      component: LeftNav
    },
    {
      path: '/TopNav',
      name: 'TopNav',
      component: TopNav
    },

3.修改样式问题

在下面所有的导入组件,并将LeftNav和TopNav注册到Appmain中

(1)Appmain

export default {
components:{
      TopNav,LeftNav
    },
    data(){
      return{
        asideClass:'main-aside'
      }
    }
  };

(2)LeftNav

export default {
    data(){
      return{
        collapsed:false
      }
    }
  }

(3)TopNav

export default {
    data(){
      return{
        collapsed:false,
        imgshow:require('@/assets/img/show.png'),
        imgshow:require('@/assets/img/sq.png')
      }
    }
  }

4.补充动态演示效果

由上面的可以看出,虽然左侧菜单栏由动态演示,但是顶部的收起菜单栏没有,所以需要补充JS代码进行动态演示的效果

(1)Appmain

export default {
    components:{
      TopNav,LeftNav
    },
    data(){
      return{
        asideClass:'main-aside'
      }
    },
    created(){
      this.$root.Bus.$on('bbb',v=>{
      this.asideClass = v? 'main-aside-collapsed' : 'main-aside';
    });
    }
  };

(2)LeftNav

export default {
    data(){
      return{
        collapsed:false
      }
    },
    created(){
      this.$root.Bus.$on('bbb',v=>{
      this.collapsed = v ;
    });
    }
  }

(3)TopNav

export default {
    data(){
      return{
        collapsed:false,
        imgshow:require('@/assets/img/show.png'),
        imgsq:require('@/assets/img/sq.png'),
      }
    },
    methods:{
      doToggle(){
        this.collapsed =!this.collapsed;
        //将是否折叠放入总线
        this.$root.Bus.$emit('bbb',this.collapsed);
      }
    }
  }

通过在TopNav的按钮方法中注册一个组件通信控制左侧菜单栏,由于左侧菜单栏由LeftNav和Appmain共同组成,所以需要同时控制属性collapsed和asideClass的值进行展开和缩放

演示效果:

5.退出登录

编写退出的方法

exit(){
        this.$router.push("/Login");
      }

效果演示

今天的分享到这里就结束了,感谢各位大大的观看,各位大大的三连是博主更新的动力,感谢谢谢谢谢谢谢谢谢各位的支持!!!!!

目录
打赏
0
2
2
0
19
分享
相关文章
yolov5障碍物识别-雪糕筒识别(代码+教程)
yolov5障碍物识别-雪糕筒识别(代码+教程)
【C++ 内存管理 重载new/delete 运算符 新特性】深入探索C++14 新的/删除的省略(new/delete elision)的原理与应用
【C++ 内存管理 重载new/delete 运算符 新特性】深入探索C++14 新的/删除的省略(new/delete elision)的原理与应用
265 0
Python利用K-Means算法进行图像聚类分割实战(超详细 附源码)
Python利用K-Means算法进行图像聚类分割实战(超详细 附源码)
1150 0
收藏!这7种工具可以监控AD(Active Directory)的健康状况
Active Directory (AD) 是微软为服务器操作系统设计的目录服务,用于存储和管理用户、设备等对象。72%的企业使用Windows服务器,AD成为网络核心。AD框架包括域、树、森林和组织单位。监控AD至关重要,可预防故障和安全威胁。推荐工具如Paessler PRTG、卓豪ADAudit、SolarWinds等,能有效简化管理并提高安全性。选择合适的AD管理工具,可显著提升系统管理员的工作效率和网络稳定性。
197 0
|
8月前
深入理解Flutter鸿蒙next版本 中的Widget继承:使用extends获取数据与父类约束
本文详细介绍了Flutter中如何通过继承其他Widget来创建自定义组件。首先解释了Widget继承的基本概念,包括StatelessWidget和StatefulWidget的区别。接着通过具体示例展示了如何继承StatelessWidget和StatefulWidget,并在子类中访问父类的build方法和状态。最后,结合多个自定义Widget展示了如何在实际应用中灵活使用继承和组合来构建复杂的UI。
180 8
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等