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");
      }

效果演示

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

目录
相关文章
|
JSON 前端开发 JavaScript
Mock快速入门使用及组件构造首页1
Mock快速入门使用及组件构造首页1
109 1
|
XML 前端开发 测试技术
【前端小技巧】如何使用 Eolink Apilkit 调用 Mock ?
在开发过程中,进度比较赶的情况下,前端人员当页面写完时,后台的接口还没写完,等要交付的时候后端才把接口给你,这个时候就很尴尬。 这个时候 Mock 就可以很好的解决这个问题,前端团队可以在 API 还没开发完成的情况下,借助 Mock API 实现预对接,加速开发进程。测试团队可以通过 Mock API 解决不必要的系统,完成集成测试。 Eolink Apikit 为前端工程师提供 API 文档管理,快速接口测试,以及 Mock API 创建与调用,及查看文档变更历史的能力。有助于前端工程师快速查看 API 文档详情与历史记录,快速生成和使用 Mock API 提前进行页面效果验证。
93 0
|
XML 数据格式 iOS开发
如何获取最新的X组件及源码
X组件只是一个工具,一个约束,集成了2002年新生命团队建立以来数千人的智慧,所以我们谈不上创新,我们充其量只是管理者,收集消化大家的技术,整理起来给更多的人使用。我们希望建立一套大部分人比较容易接受的标准,让大家在这个标准之内开发组件开发项目,让大家的项目具有一致的风格,让大家都能够很容易的相互合作,做项目,赚钱!X组件采用自动编译发布到FTP的方式,所以可以在FTP拿到最新的X组件发行版。
686 0
|
测试技术 Python
接口测试平台代码实现4:第一个页面
好了,咱书接上回,我们目前已经项目和app都创建好了。 现在我们用pycharm来打开这个项目,记住要选择到项目上(也就是ApiTest),层级别选错了,选对的话,pycharm是可以自动识别出来这是个django项目,给你安排好启动服务功能的哦~
接口测试平台代码实现4:第一个页面
|
存储 缓存 小程序
微信小程序的跨页面传参以及data-方法的相关细节
微信小程序的跨页面传参以及data-方法的相关细节
620 0
SpringMVC之综合案例:参数传递,向页面传参,页面跳转
SpringMVC之综合案例:参数传递,向页面传参,页面跳转
62 0
|
前端开发 JavaScript 测试技术
接口测试平台代码实现28:子页面-项目设置
本节基本会快速的一起做完 3个子页面的 最简单的 项目设置。 整体会提高节奏。重复的简单知识不会再过多阐述,给大家先熟悉下快节奏的感觉,以便后面把主要精力放在复杂的功能实现上。
接口测试平台代码实现28:子页面-项目设置
|
4月前
|
JavaScript
Vue路由传参实战指南:三种常用方法示例演示
Vue路由传参实战指南:三种常用方法示例演示
199 0
【MyBean-开源框架】进行简单的逻辑插件(演示在控制台中应用)
【说明】 很多时候大家认为客户端插件一般是窗体。其实不然,很多功能都可以看成是插件,比如一个单据的审批功能,一个单据上面,单价的获取功能,都可以看成是插件,然后后期通过配置,可以灵活进行切换。MyBean支持这种插件,支持这种纯逻辑的插件。
852 0
|
7月前
|
小程序 数据库 C++
【微信小程序-原生开发】实用教程16 - 查看详情(含页面跳转的传参方法--简单传参 vs 复杂传参)
【微信小程序-原生开发】实用教程16 - 查看详情(含页面跳转的传参方法--简单传参 vs 复杂传参)
66 0

热门文章

最新文章