Skip to content

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

Add view

parent 275876ea
Showing with 224 additions and 71 deletions
src/components/LayoutContent.vue → src/components/GlobalView.vue
<template>
<a-layout-content class="layout-content">
<div style="margin: -24px -24px 0px;" v-if="!$route.meta.hideHeader">
<!-- 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>
<layout-view>
<route-view />
</layout-view>
</template>
<script>
import PageHeader from './PageHeader'
import LayoutView from './LayoutView'
import RouteView from './RouteView'
export default {
name: "LayoutContent",
name: "GlobalView",
components: {
"s-page-header": PageHeader,
"s-route-view": RouteView
LayoutView,
RouteView
}
}
</script>
......
src/views/Layout.vue → src/components/LayoutView.vue
<template>
<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>
<!-- layout header -->
<s-layout-header :collapsed="collapsed" @toggle="toggle"></s-layout-header>
<!-- 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">
<s-layout-footer />
</a-layout-footer>
......@@ -16,18 +21,18 @@
</template>
<script>
import SiderMenu from '@/components/menu/SiderMenu'
import LayoutHeader from '@/components/LayoutHeader'
import LayoutContent from '@/components/LayoutContent'
import LayoutFooter from '@/components/LayoutFooter'
import { asyncRouterMap } from '@/router/index'
export default {
name: "Layout",
import SiderMenu from '@/components/menu/SiderMenu'
import LayoutHeader from '@/components/LayoutHeader'
import LayoutFooter from '@/components/LayoutFooter'
import PageContent from '@/components/PageContent'
import { asyncRouterMap } from '@/router/index'
export default {
name: "LayoutView",
components: {
"s-sider-menu": SiderMenu,
SiderMenu,
PageContent,
"s-layout-header": LayoutHeader,
"s-layout-content": LayoutContent,
"s-layout-footer": LayoutFooter
},
data() {
......@@ -45,7 +50,7 @@ export default {
},
}
}
}
</script>
<style lang="scss">
......@@ -148,40 +153,6 @@ export default {
.layout-content {
margin: 24px 24px 0px;
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>
<div class="pageHeader">
<div class="page-header">
<s-breadcrumb></s-breadcrumb>
<div class="detail">
<div v-if="avatar" class="avatar"><a-avatar :src="avatar" /></div>
<div class="main">
<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 class="row"></div>
</div>
</div>
</div>
......@@ -21,10 +27,88 @@
name: "PageHeader",
components: {
"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>
<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>
\ 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 Router from 'vue-router'
import Layout from '../views/Layout'
import Layout from '../components/LayoutView'
Vue.use(Router)
/**
......@@ -46,7 +46,7 @@ export const asyncRouterMap = [
component: Layout,
name: 'dashboard',
redirect: '/dashboard/analysis',
meta: { title: 'dashboard', icon: 'dashboard' },
meta: { title: '仪表盘', icon: 'dashboard' },
children: [
{
path: '/dashboard/analysis',
......@@ -64,7 +64,7 @@ export const asyncRouterMap = [
path: '/dashboard/workplace',
name: '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