From 00e888efb09a9e3632a63682019c83917135ade3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=9D=A8?= <1711467488@qq.com>
Date: Thu, 22 Mar 2018 23:07:57 +0800
Subject: [PATCH] no message

Former-commit-id: 24eeb4f81eeb7369d02c362ded62b0f488aa5361
Former-commit-id: 90c0466974ab6e241d51894c87c7c5d9951d9866
Former-commit-id: e79975605ba0428165250197e3178bde4cff9b78
---
 src/assets/style/fixed/markdown.scss          |  3 +++
 src/components/core/CardFull/index.vue        | 21 ++++++++++++++++--
 src/components/core/Container/index.vue       |  1 +
 .../demo/components/container/card-full.vue   |  2 +-
 static/md/组件 - 页面容器 - 基础.md           |  2 +-
 ...�章 - 长页面.md => 组件 - 页面容器 - 撑满.md} | 22 ++++++++++++++++++-
 static/md/组件 - 页面容器 - 隐形.md           |  2 +-
 static/md/组件 - 页面容器.md                  |  2 +-
 8 files changed, 48 insertions(+), 7 deletions(-)
 rename static/md/{演示文章 - 长页面.md => 组件 - 页面容器 - 撑满.md} (80%)

diff --git a/src/assets/style/fixed/markdown.scss b/src/assets/style/fixed/markdown.scss
index 61deecdf..cd71054f 100644
--- a/src/assets/style/fixed/markdown.scss
+++ b/src/assets/style/fixed/markdown.scss
@@ -4,4 +4,7 @@
   ul {
     list-style: disc;
   }
+  h1, h2 {
+    border-bottom: none;
+  }
 }
\ No newline at end of file
diff --git a/src/components/core/CardFull/index.vue b/src/components/core/CardFull/index.vue
index a839b216..20ba0beb 100644
--- a/src/components/core/CardFull/index.vue
+++ b/src/components/core/CardFull/index.vue
@@ -6,6 +6,9 @@
     <div class="dd-card-full__body" :style="bodyStyle">
       <slot></slot>
     </div>
+    <div v-if="$slots.footer" class="dd-card-full__footer" ref="footer">
+      <slot name="footer"></slot>
+    </div>
   </div>
 </template>
 
@@ -36,11 +39,13 @@ export default {
   },
   data () {
     return {
-      headerHeight: 0
+      headerHeight: 0,
+      footerHeight: 0
     }
   },
   mounted () {
     this.headerHeight = this.$slots.header ? this.$refs.header.offsetHeight : 0
+    this.footerHeight = this.$slots.footer ? this.$refs.footer.offsetHeight : 0
   },
   computed: {
     cardStyle () {
@@ -53,7 +58,8 @@ export default {
     },
     bodyStyle () {
       return {
-        top: `${this.headerHeight}px`
+        top: `${this.headerHeight}px`,
+        bottom: `${this.footerHeight}px`
       }
     }
   }
@@ -74,6 +80,8 @@ export default {
   }
   .dd-card-full__header {
     position: absolute;
+    top: 0px;
+    left: 0px;
     width: 100%;
     padding: 18px 20px;
     border-bottom: 1px solid #ebeef5;
@@ -87,5 +95,14 @@ export default {
     bottom: 0px;
     overflow: auto;
   }
+  .dd-card-full__footer {
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    width: 100%;
+    padding: 18px 20px;
+    border-top: 1px solid #ebeef5;
+    box-sizing: border-box;
+  }
 }
 </style>
diff --git a/src/components/core/Container/index.vue b/src/components/core/Container/index.vue
index 6c9f5091..8d02c477 100644
--- a/src/components/core/Container/index.vue
+++ b/src/components/core/Container/index.vue
@@ -14,6 +14,7 @@
     <card-full v-if="type === 'card-full'" :right="20" :bottom="20">
       <slot v-if="$slots.header" name="header" slot="header"></slot>
       <slot></slot>
+      <slot v-if="$slots.footer" name="footer" slot="footer"></slot>
     </card-full>
   </div>
 </template>
diff --git a/src/pages/demo/components/container/card-full.vue b/src/pages/demo/components/container/card-full.vue
index 38cce2b7..5fb74839 100644
--- a/src/pages/demo/components/container/card-full.vue
+++ b/src/pages/demo/components/container/card-full.vue
@@ -3,7 +3,7 @@
     <template slot="header">
       我是插入到 header 中的内容
     </template>
-    <Markdown url="/static/md/演示文章 - 长页面.md"></Markdown>
+    <Markdown url="/static/md/组件 - 页面容器 - 撑满.md"></Markdown>
     <template slot="footer">
       我是插入到 footer 中的内容
     </template>
diff --git a/static/md/组件 - 页面容器 - 基础.md b/static/md/组件 - 页面容器 - 基础.md
index 945f021b..487b666b 100644
--- a/static/md/组件 - 页面容器 - 基础.md	
+++ b/static/md/组件 - 页面容器 - 基础.md	
@@ -1,4 +1,4 @@
-基础页面容器
+## 基础页面容器
 
 高度根据内容适应
 
diff --git a/static/md/演示文章 - 长页面.md b/static/md/组件 - 页面容器 - 撑满.md
similarity index 80%
rename from static/md/演示文章 - 长页面.md
rename to static/md/组件 - 页面容器 - 撑满.md
index 1f6e8fef..8d183f44 100644
--- a/static/md/演示文章 - 长页面.md	
+++ b/static/md/组件 - 页面容器 - 撑满.md	
@@ -1,4 +1,24 @@
-> 这是一个较长的演示文章，仅仅是为了演示一些文字的显示效果
+## 自适应填充页面容器
+
+无论内容高度多少，都会自动撑满页面，并有可选的 `header` 和 `footer` 插槽
+
+示例：
+
+```
+<template>
+  <Container type="card-full">
+    <template slot="header">
+      可选的 header 内容 ...
+    </template>
+    主体内容 ...
+    <template slot="footer">
+      可选的 footer 内容 ...
+    </template>
+  </Container>
+</template>
+```
+
+下面是一个较长的演示文章，仅仅是为了演示一些文字的显示效果
 
 ## vue.js
 
diff --git a/static/md/组件 - 页面容器 - 隐形.md b/static/md/组件 - 页面容器 - 隐形.md
index d9a53398..b35618ac 100644
--- a/static/md/组件 - 页面容器 - 隐形.md	
+++ b/static/md/组件 - 页面容器 - 隐形.md	
@@ -1,4 +1,4 @@
-隐形页面容器
+## 隐形页面容器
 
 不显示任何背景色和边框
 
diff --git a/static/md/组件 - 页面容器.md b/static/md/组件 - 页面容器.md
index 69d71b89..e4c009b5 100644
--- a/static/md/组件 - 页面容器.md	
+++ b/static/md/组件 - 页面容器.md	
@@ -17,7 +17,7 @@
 <template>
   <Container>
     <template slot="header">
-      可选的header内容 ...
+      可选的 header 内容 ...
     </template>
     主体内容 ...
   </Container>