feat: PageHeader components

lbwa · Oct 4, 2018 · 488826c · 488826c
1 parent 5bade8e
commit 488826c
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 17 deletions.
diff --git a/src/components/Breadcrumb.vue b/src/components/Breadcrumb.vue
@@ -1,6 +1,7 @@
 <template>
   <el-breadcrumb v-if="links.length" :separator="separator">
     <el-breadcrumb-item
+      class="breadcrumb__item"
       v-for="item of links"
       :key="item.name"
       :to="createRouteTo(item.path)"
@@ -22,7 +23,6 @@ export default {
         ]
       }
     },
-
     separator: {
       type: String,
       default: '/'
@@ -38,5 +38,7 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-
+.breadcrumb
+  &__item
+    line-height: 1.5
 </style>
diff --git a/src/components/PageHeader.vue b/src/components/PageHeader.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="page__header">
+    <el-row class="page__breadcrumb__layout" v-if="links.length">
+      <breadcrumb :links="links"></breadcrumb>
+    </el-row>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import Breadcrumb from 'COMPONENTS/Breadcrumb'
+export default {
+  props: {
+    links: {
+      type: Array,
+      default () {
+        return []
+      }
+    }
+  },
+
+  components: {
+    Breadcrumb
+  }
+}
+</script>
+
+<style lang="sass" scoped>
+@import '~STYLE/color/background.sass'
+
+.page
+  &__header
+    margin: -24px -24px 0
+    padding: 16px 32px 0
+    background-color: $background-lightest
+
+  &__breadcrumb
+    &__layout
+      margin-bottom: 16px
+</style>
diff --git a/src/components/Workspace/Header.vue b/src/components/Workspace/Header.vue
@@ -1,8 +1,5 @@
 <template>
-  <div class="workspace__header">
-    <el-row class="workspace__breadcrumb">
-      <breadcrumb :links="breadcrumb"></breadcrumb>
-    </el-row>
+  <page-header :links="breadcrumb">
     <el-row>
       <el-col
         class="workspace__user-detail"
@@ -43,11 +40,11 @@
         </div>
       </el-col>
     </el-row>
-  </div>
+  </page-header>
 </template>
 
 <script>
-import Breadcrumb from 'COMPONENTS/Breadcrumb'
+import PageHeader from 'COMPONENTS/PageHeader'
 import { decimalNumber } from 'COMPONENTS/utils'
 
 export default {
@@ -137,7 +134,7 @@ export default {
   }],
 
   components: {
-    Breadcrumb
+    PageHeader
   }
 }
 </script>
@@ -146,12 +143,7 @@ export default {
 @import '~STYLE/color/background.sass'
 
 .workspace
-  &__header
-    margin: -24px -24px 0
-    padding: 16px 32px 0
-    background-color: $background-lightest
-
-  &__breadcrumb, &__user-detail
+  &__user-detail
     margin-bottom: 16px
 
   &__user-detail, &__user-abstract

diff --git a/src/view/Form/Basic.vue b/src/view/Form/Basic.vue
@@ -1,15 +1,37 @@
 <template>
   <el-main class="basic-form">
-    {{ info }}
+    <page-header :links="links">
+      <div class="basic-form__header__content">{{info}}</div>
+    </page-header>
+    <!-- page content area -->
   </el-main>
 </template>
 
 <script>
+import PageHeader from 'COMPONENTS/PageHeader'
 export default {
   data () {
     return {
-      info: 'basic info'
+      info: 'basic info',
+      links: [
+        {
+          name: '首页',
+          path: '/'
+        },
+        {
+          name: '表单页',
+          path: ''
+        },
+        {
+          name: '基础表单',
+          path: ''
+        }
+      ]
     }
+  },
+
+  components: {
+    PageHeader
   }
 }
 </script>