Skip to content

A
ant-design-pro-vue
Commit 696d1e8a by Sendya
Options

Add view

parent 275876ea
Showing with 239 additions and 86 deletions
src/components/LayoutContent.vue → src/components/GlobalView.vue
<template> <template>
<a-layout-content class="layout-content"> <layout-view>
<div style="margin: -24px -24px 0px;" v-if="!$route.meta.hideHeader"> <route-view />
</layout-view>
<!-- pageHeader , route meta hideHeader:true on hide -->
<s-page-header></s-page-header>
<div class="content">
<s-route-view></s-route-view>
</div>
</div>
<s-route-view v-else></s-route-view>
</a-layout-content>
</template> </template>
<script> <script>
import PageHeader from './PageHeader' import LayoutView from './LayoutView'
import RouteView from './RouteView' import RouteView from './RouteView'
export default { export default {
name: "LayoutContent", name: "GlobalView",
components: { components: {
"s-page-header": PageHeader, LayoutView,
"s-route-view": RouteView RouteView
} }
} }
</script> </script>
......
src/views/Layout.vue → src/components/LayoutView.vue
<template> <template>
<a-layout class="layout"> <a-layout class="layout">
<s-sider-menu :menus="menus" :collapsed="collapsed" :collapsible="true"></s-sider-menu> <sider-menu :menus="menus" :collapsed="collapsed" :collapsible="true"></sider-menu>
<a-layout> <a-layout>
<!-- layout header --> <!-- layout header -->
<s-layout-header :collapsed="collapsed" @toggle="toggle"></s-layout-header> <s-layout-header :collapsed="collapsed" @toggle="toggle"></s-layout-header>
<!-- layout content --> <!-- layout content -->
<s-layout-content></s-layout-content> <a-layout-content :style="{ margin: '24px 24px 0', height: '100%' }">
<page-content>
<slot></slot>
</page-content>
</a-layout-content>
<a-layout-footer style="padding: 0px"> <a-layout-footer style="padding: 0px">
<s-layout-footer /> <s-layout-footer />
</a-layout-footer> </a-layout-footer>
...@@ -16,36 +21,36 @@ ...@@ -16,36 +21,36 @@
</template> </template>
<script> <script>
import SiderMenu from '@/components/menu/SiderMenu' import SiderMenu from '@/components/menu/SiderMenu'
import LayoutHeader from '@/components/LayoutHeader' import LayoutHeader from '@/components/LayoutHeader'
import LayoutContent from '@/components/LayoutContent' import LayoutFooter from '@/components/LayoutFooter'
import LayoutFooter from '@/components/LayoutFooter' import PageContent from '@/components/PageContent'
import { asyncRouterMap } from '@/router/index' import { asyncRouterMap } from '@/router/index'
export default { export default {
name: "Layout", name: "LayoutView",
components: { components: {
"s-sider-menu": SiderMenu, SiderMenu,
"s-layout-header": LayoutHeader, PageContent,
"s-layout-content": LayoutContent, "s-layout-header": LayoutHeader,
"s-layout-footer": LayoutFooter "s-layout-footer": LayoutFooter
}, },
data() { data() {
return { return {
collapsed: false, collapsed: false,
menus: [] menus: []
} }
}, },
created () { created () {
this.menus = asyncRouterMap this.menus = asyncRouterMap
},
methods: {
toggle() {
this.collapsed = !this.collapsed;
}, },
methods: {
toggle() {
this.collapsed = !this.collapsed;
},
}
} }
}
</script> </script>
<style lang="scss"> <style lang="scss">
...@@ -148,40 +153,6 @@ export default { ...@@ -148,40 +153,6 @@ export default {
.layout-content { .layout-content {
margin: 24px 24px 0px; margin: 24px 24px 0px;
height: 100%; height: 100%;
.pageHeader {
background: #fff;
padding: 16px 32px 0;
border-bottom: 1px solid #e8e8e8;
.breadcrumb {
margin-bottom: 16px;
}
.detail {
display: flex;
.main {
width: 100%;
.row {
display: flex;
width: 100%;
}
}
.title {
font-size: 20px;
font-weight: 500;
}
}
.title {
margin-bottom: 16px;
flex: auto;
}
}
.content {
margin: 24px 24px 0;
}
} }
} }
......
src/components/PageContent.vue 0 → 100644
<template>
<page-layout :desc="desc" :title="title" :link-list="linkList">
<div slot="extra" class="extra-img">
<img :src="extraImage"/>
</div>
<!-- keep-alive -->
<route-view></route-view>
</page-layout>
</template>
<script>
import PageLayout from './PageLayout'
import RouteView from './RouteView'
export default {
name: "PageContent",
components: {
RouteView,
PageLayout
},
data () {
return {
title: '',
desc: '',
linkList: [],
extraImage: ''
}
},
mounted () {
this.getPageHeaderInfo()
},
updated () {
this.getPageHeaderInfo()
},
methods: {
getPageHeaderInfo () {
// eslint-disable-next-line
console.log('route title:', this.$route.meta.title)
this.title = this.$route.meta.title
const content = this.$refs.content
if (content) {
this.desc = content.desc
this.linkList = content.linkList
this.extraImage = content.extraImage
}
}
}
}
</script>
<style lang="scss" scoped>
.extra-img{
margin-top: -60px;
text-align: center;
width: 195px;
img{
width: 100%;
}
}
</style>
\ No newline at end of file
src/components/PageHeader.vue
<template> <template>
<div class="pageHeader"> <div class="page-header">
<s-breadcrumb></s-breadcrumb> <s-breadcrumb></s-breadcrumb>
<div class="detail"> <div class="detail">
<div v-if="avatar" class="avatar"><a-avatar :src="avatar" /></div>
<div class="main"> <div class="main">
<div class="row"> <div class="row">
<h1 class="title" v-text="$route.meta.title"></h1> <img v-if="logo" :src="logo" class="logo" />
<h1 v-if="title" class="title">{{ title }}</h1>
<div class="action"><slot name="action"></slot></div>
</div>
<div class="row">
<div v-if="this.$slots.content" class="content"><slot name="content"></slot></div>
<div v-if="this.$slots.extra" class="extra"><slot name="extra"></slot></div>
</div> </div>
<div class="row"></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -21,10 +27,88 @@ ...@@ -21,10 +27,88 @@
name: "PageHeader", name: "PageHeader",
components: { components: {
"s-breadcrumb": Breadcrumb "s-breadcrumb": Breadcrumb
},
props: {
title: {
type: String,
required: false
},
breadcrumb: {
type: Array,
required: false
},
logo: {
type: String,
required: false
},
avatar: {
type: String,
required: false
}
} }
} }
</script> </script>
<style scoped> <style lang="scss" scoped>
.page-header {
background: #fff;
padding: 16px 32px 0;
border-bottom: 1px solid #e8e8e8;
.breadcrumb {
margin-bottom: 16px;
}
.detail {
display: flex;
.avatar {
flex: 0 1 72px;
margin: 0 24px 8px 0;
& > span {
border-radius: 72px;
display: block;
width: 72px;
height: 72px;
}
}
.main {
width: 100%;
flex: 0 1 auto;
.row {
display: flex;
width: 100%;
}
.title {
font-size: 20px;
font-weight: 500;
}
.logo {
width: 28px;
height: 28px;
border-radius: 4px;
margin-right: 16px;
}
.content {
margin-bottom: 16px;
flex: auto;
}
.extra {
flex: 0 1 auto;
margin-left: 88px;
min-width: 242px;
text-align: right;
}
.action {
margin-left: 56px;
min-width: 266px;
flex: 0 1 auto;
text-align: right;
}
}
}
}
</style> </style>
\ No newline at end of file
src/components/PageLayout.vue 0 → 100644
<template>
<div :style="!$route.meta.hideHeader ? 'margin: -24px -24px 0px;' : null">
<!-- pageHeader , route meta hideHeader:true on hide -->
<page-header v-if="!$route.meta.hideHeader" :title="title" :logo="logo" :avatar="avatar">
<slot slot="action" name="action"></slot>
<slot slot="content" name="headerContent"></slot>
<div slot="content" v-if="!this.$slots.headerContent && desc">
<p style="font-size: 14px;line-height: 1.5;color: rgba(0,0,0,.65)">{{ desc }}</p>
<div class="link">
<template v-for="(link, index) in linkList">
<a :key="index" :href="link.href">
<a-icon :type="link.icon" />{{ link.title }}</a>
</template>
</div>
</div>
<slot slot="extra" name="extra"></slot>
</page-header>
<div v-if="!$route.meta.hideHeader" ref="content" class="content">
<slot></slot>
</div>
<slot v-else></slot>
</div>
</template>
<script>
import PageHeader from './PageHeader'
import RouteView from './RouteView'
export default {
name: "LayoutContent",
components: {
PageHeader,
"s-route-view": RouteView
},
props: ['desc', 'logo', 'title', 'avatar', 'linkList', 'extraImage'],
}
</script>
<style scoped>
.content {
margin: 24px 24px 0;
}
</style>
\ No newline at end of file
src/router/index.js
import Vue from 'vue' import Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
import Layout from '../views/Layout' import Layout from '../components/LayoutView'
Vue.use(Router) Vue.use(Router)
/** /**
...@@ -46,7 +46,7 @@ export const asyncRouterMap = [ ...@@ -46,7 +46,7 @@ export const asyncRouterMap = [
component: Layout, component: Layout,
name: 'dashboard', name: 'dashboard',
redirect: '/dashboard/analysis', redirect: '/dashboard/analysis',
meta: { title: 'dashboard', icon: 'dashboard' }, meta: { title: '仪表盘', icon: 'dashboard' },
children: [ children: [
{ {
path: '/dashboard/analysis', path: '/dashboard/analysis',
...@@ -64,7 +64,7 @@ export const asyncRouterMap = [ ...@@ -64,7 +64,7 @@ export const asyncRouterMap = [
path: '/dashboard/workplace', path: '/dashboard/workplace',
name: 'Workplace', name: 'Workplace',
component: () => import('../views/dashboard/Workplace'), component: () => import('../views/dashboard/Workplace'),
meta: { title: '工作台', hideHeader: true } meta: { title: '工作台' }
} }
] ]
}, },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment