美文网首页
05-4 Vue-admin基本布局.md

05-4 Vue-admin基本布局.md

作者: 时修七年 | 来源:发表于2019-01-31 16:11 被阅读35次

    布局

    页面整体布局是一个产品最外层的框架结构,往往会包含导航、侧边栏、面包屑以及内容等。想要了解一个后台项目,先要了解它的基础布局。

    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

    相关文章

      网友评论

          本文标题:05-4 Vue-admin基本布局.md

          本文链接:https://www.haomeiwen.com/subject/djsksqtx.html