布局
页面整体布局是一个产品最外层的框架结构,往往会包含导航、侧边栏、面包屑以及内容等。想要了解一个后台项目,先要了解它的基础布局。
layout
layout.png我们的项目大部分页面都是基于这个 layout 的,除了个别页面如: login , 404, 401 等页面没有使用该layout。因此我们在路由表里设置layout为父组件,在layout的Content里配置router-view
作为匹配组件的出口
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from "./views/Login";
import Layout from "./components/Layout"
import Notebooks from './views/Notebooks'
import Notes from './views/Notes'
import Trash from './views/Trash'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
component: Layout,
redirect: '/notebooks',
children: [
{
path: 'notebooks',
component: Notebooks
},
{
path: 'notes',
component: Notes
},
{
path: 'trash',
component: Trash
},
{
path: 'hello',
component: HelloWorld
}
]
},
{
path: '/login',
name: 'Login',
component: Login
},
]
})
这里使用了 vue-router 路由嵌套, 所以一般情况下,你增加或者修改页面只会影响 app-main
这个主体区域。其它配置在 layout
中的内容如:侧边栏或者导航栏都是不会随着你主体页面变化而变化的。
layout code
<template>
<Layout class='layout'>
<Header class="header">
<Row>
<i-col span="3" offset="1">
<img src="../../static/logo1.png" alt="logo" class="logo">
</i-col>
<i-col span="14">
<h1 style='font-weight: 400;font-size: 20px;margin-left:0'>保持进步,随时印象笔记</h1>
</i-col>
<i-col span="4" style='float: right'>
<Row>
<i-col span="8">
<Dropdown>
<Avatar src="https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar"></Avatar>
<DropdownMenu slot="list">
<DropdownItem>我的主页</DropdownItem>
<DropdownItem>我的收藏</DropdownItem>
<DropdownItem>
设置
<Badge status="error" />
</DropdownItem>
<DropdownItem divided>退出登录</DropdownItem>
</DropdownMenu>
</Dropdown>
</i-col>
<i-col span="8">
<Dropdown>
<Badge :count="count" :offset="[20,4]">
<Icon type="md-notifications-outline" size="24" />
</Badge>
<DropdownMenu slot="list">
<Tabs value="notification">
<TabPane label="通知" name="notification">
<div class="notification">通知内容</div>
</TabPane>
<TabPane label="关注" name="follow">
<div class="notification">关注内容</div>
</TabPane>
<TabPane label="系统" name="system">
<div class="notification">系统内容</div>
</TabPane>
</Tabs>
</DropdownMenu>
</Dropdown>
</i-col>
<i-col span='8'>
<Icon type="md-color-palette" size="24"></Icon>
</i-col>
</Row>
</i-col>
</Row>
</Header>
<Layout>
<Sider class="sider" width="240" collapsible v-model="isCollapsed" :class="{ 'sider-hide': isCollapsed }">
<Menu class="sider-menu" theme="dark" :active-name="activeName">
<MenuItem name="/notebooks" to='/notebooks'>
<Icon type="ios-search"></Icon>
<span>笔记本列表</span>
</MenuItem>
<MenuItem name="/notes" to='/notes'>
<Icon type="ios-apps"></Icon>
<span>笔记列表</span>
</MenuItem>
<MenuItem name="/trash" to='/trash'>
<Icon type="ios-bookmark"></Icon>
<span>回收站</span>
</MenuItem>
</Menu>
</Sider>
<Content class="content" :class="{ 'content-expand': isCollapsed }">
<router-view></router-view>
</Content>
</Layout>
<Drawer title="选择配色" v-model="openTheme" :closable="false">
</Drawer>
</Layout>
</template>
<script>
export default {
props: {},
data () {
return {
activeName: this.$route.path,
count: 2,
openTheme: false,
isCollapsed: false
};
},
created () {
this.activeName = this.$route.path
console.log(this.$route.path)
}
};
</script>
<style>
.layout {
min-height: 100vh
}
.header{
width: 100%;
height: 60px;
background: #fff;
box-shadow: 0 1px 1px rgba(0,0,0,.05);
position: fixed;
top: 0;
left: 0;
z-index: 9;
}
.logo{
height: 50px;
margin-top: 5px;
}
.notification{
text-align: center;
height: 200px;
}
.ivu-menu {
text-align: left
}
.ivu-menu-horizontal.ivu-menu-light:after{
display: none;
}
.sider{
position: fixed;
height: 100%;
left: 0;
overflow: auto;
z-index: 1;
}
.sider-menu{
margin-top: 60px;
}
.sider-hide .ivu-menu-item span{
display: none;
}
.content{
margin-left: 260px;
margin-top: 60px;
padding: 16px;
transition: all .2s ease-in-out;
overflow: auto
}
.content-expand{
margin-left: 84px;
}
</style>
code.png
网友评论