no message

Former-commit-id: 24eeb4f81eeb7369d02c362ded62b0f488aa5361
Former-commit-id: 90c0466974ab6e241d51894c87c7c5d9951d9866
Former-commit-id: e79975605ba0428165250197e3178bde4cff9b78

src/assets/style/fixed/markdown.scss

@@ -4,4 +4,7 @@
   ul {
     list-style: disc;
   }
+  h1, h2 {
+    border-bottom: none;
+  }
 }

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>

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>

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>

static/md/组件 - 页面容器 - 基础.md

@@ -1,4 +1,4 @@
-基础页面容器
+## 基础页面容器
 
 高度根据内容适应
 

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
 

static/md/组件 - 页面容器 - 隐形.md

@@ -1,4 +1,4 @@
-隐形页面容器
+## 隐形页面容器
 
 不显示任何背景色和边框
 

static/md/组件 - 页面容器.md

@@ -17,7 +17,7 @@
 <template>
   <Container>
     <template slot="header">
-      可选的header内容 ...
+      可选的 header 内容 ...
     </template>
     主体内容 ...
   </Container>