vhr项目地址: https://github.com/lenve/vhr
项目作者: https://blog.csdn.net/u012702547
(一)element-ui简析
该前端文件中使用的element-ui组件如下:
- el-container: 外层容器。当子元素中包含 <el-header> 或 <el-footer> 时,全部子元素会垂直上下排列,否则会水平左右排列。
- el-header: 顶层栏目的容器(页面顶层)。
- el-aside: 侧边栏目(可以用作侧面菜单)。
- el-main: 主要区域的容器。
- el-badge: 对组件进行标记,is-dot使boolean类型,表示是否有小红点。
- el-dropdown和el-dropdown-menu: 在el-dropdown-menu中通过组件slot来设置下拉触发的元素以及需要通过具名slot为dropdown 来设置下拉菜单。
- el-dropdown-item: 的元素command功能是点击菜单项触发的事件回调。
- index: 为每一项的唯一标记。要绑定路由的path。
- default-active: 设为当前路由(this.$route.path),这样在路由变化的时候,对应的menu-item才会高亮。
- router: 加上这个之后每一项会根据其index进行路由跳转(vue-router模式)。
- template: 作用是模板占位符,帮助我们包裹元素。但是循环过程中template不会被渲染到页面上。
- el-breadcrumb: separator-class为图标分隔符class。to表示路由跳转对象,同vue-router的to。replace属性意义为跳转,不计入history。
- keepAlive: 将切换出去的组件缓存下来。
(二)element-ui组件的大体架构
el-header负责上方; el-aside负责侧方; el-main 负责剩下蓝色区域。
<template>
<div>
<el-container style="background: crimson;height: 100%;min-height100vh: ">
<el-header >
<span>我的项目
</el-header>
<el-container>
<el-aside style=“background: olive”>
</el-aside>
<el-main style=“background: aqua”>
</el-main>
</el-container>
</el-container>
</div>
</template>
(三)上方栏目布局
红点使el-badge设置的;我们把鼠标放在下拉这个按钮上,就会出下一个dropdown菜单。
<span>我的项目</span>
<div>
<el-badge :is-dot=“true”>
<i class=“fa fa-bell-o”>
</el-badge>
<el-dropdown >
<span>下拉
<el-dropdown-menu slot=“dropdown”>
<el-dropdown-item>个人中心
<el-dropdown-item>设置
<el-dropdown-item>注销
</el-dropdown-menu>
</el-dropdown>
</div>
(四) 侧方栏目布局
左边栏目el-aside的布局如下:
<div >
<el-menu style="background: #ececec" unique-opened router>
<template v-for="(item,index) in itemlist" v-if="!item.hidden">
<el-submenu :key="index" :index="index+''">
<template slot="title">
<span slot="title">{{item.name}}</span>
</template>
<el-menu-item width="180px"
v-for="child in item.children"
:index="child.path"
:key="child.path">{{child.name}}
</el-menu-item>
</el-submenu>
</template>
</el-menu>
</div>
(五)主体布局
最后是el-main中组件的布局
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item v-text="this.$router.currentRoute.name"></el-breadcrumb-item>
</el-breadcrumb>
<keep-alive>
<router-view v-if="this.$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!this.$route.meta.keepAlive"></router-view>
我的使用
<div>
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{path:'/Home'}">首页</el-breadcrumb-item>
<el-breadcrumb-item :to="{path:'/Home'}">还是首页</el-breadcrumb-item>
<el-breadcrumb-item v-text="this.$router.currentRoute.name"></el-breadcrumb-item>
</el-breadcrumb>
</div>
- 在这里将接下来用户选中的组件显示出来
<keep-alive>
<router-view v-if="this.$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!this.$route.meta.keepAlive"></router-view>