From 082aeaedfc9accc50efef49bff73a4c34c4feaec Mon Sep 17 00:00:00 2001
From: liyang <1711467488@qq.com>
Date: Sat, 21 Jul 2018 14:33:33 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=BC=94=E7=A4=BA=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: 08c38797e7e75f9c190668ea0f35bd734ff8a97c [formerly 08c38797e7e75f9c190668ea0f35bd734ff8a97c [formerly 08c38797e7e75f9c190668ea0f35bd734ff8a97c [formerly 08c38797e7e75f9c190668ea0f35bd734ff8a97c [formerly 5491ed5f6ac75b4d48a004ba08807135ed5aac7e [formerly a9a685b7fc04d773b7d9c7cf185a3f94a17d8747]]]]]
Former-commit-id: f9f1f887ab9deb49df9a628d3477bdfea6462892
Former-commit-id: c17530121bb41043a6a9dbbc67f12b4951f9a244
Former-commit-id: ffbc38f43f72df65906d39a1f68d9a137713cf75 [formerly d4d3fdd04b54cc36b8e288cf34ae76aaba4af981]
Former-commit-id: 0826f027c88d8e11a84e5e58b6ea8f18c04a9aff
Former-commit-id: cf8399f1cf5137dbb3035a371bd28934d0f4f0ed
Former-commit-id: a1b428edae7306cd4b8405e2c4de6a11d34fa5d7
Former-commit-id: f0106960bfc869c4899e90387b21e2bdeb7f7522
Former-commit-id: fedb644da6765650703baeea7596864a6d4a6438
---
 .../container/components/d2-demo-article.vue  | 28 +++++++++++++++++--
 .../demo/components/container/ghost-bs.vue    |  4 ++-
 .../demo/components/container/ghost-slot.vue  |  4 ++-
 src/pages/demo/components/container/ghost.vue |  4 ++-
 .../demo/components/container/md/long.md      |  2 --
 .../demo/components/container/md/short.md     | 17 +++++++++++
 6 files changed, 51 insertions(+), 8 deletions(-)
 create mode 100644 src/pages/demo/components/container/md/short.md

diff --git a/src/pages/demo/components/container/components/d2-demo-article.vue b/src/pages/demo/components/container/components/d2-demo-article.vue
index ab96b27d..1d77d8fc 100644
--- a/src/pages/demo/components/container/components/d2-demo-article.vue
+++ b/src/pages/demo/components/container/components/d2-demo-article.vue
@@ -1,16 +1,38 @@
 <template>
   <div>
-    <d2-markdown :source="long"/>
+    <div class="d2-demo-article-control">
+      <el-switch
+        v-model="isLong"
+        active-text="长内容"
+        inactive-text="短内容">
+      </el-switch>
+    </div>
+    <d2-markdown v-show="isLong" :source="long"/>
+    <d2-markdown v-show="!isLong" :source="short"/>
   </div>
 </template>
 
 <script>
-import long from '../md/long'
+import long from '../md/long.md'
+import short from '../md/short.md'
 export default {
   data () {
     return {
-      long
+      long,
+      short,
+      isLong: false
     }
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.d2-demo-article-control {
+  padding: 8px 16px;
+  margin-bottom: 10px;
+  box-sizing: border-box;
+  border-radius: 4px;
+  background-color: #f4f4f5;
+}
+</style>
+
diff --git a/src/pages/demo/components/container/ghost-bs.vue b/src/pages/demo/components/container/ghost-bs.vue
index 3ca9a643..51af6f7a 100644
--- a/src/pages/demo/components/container/ghost-bs.vue
+++ b/src/pages/demo/components/container/ghost-bs.vue
@@ -2,7 +2,9 @@
   <d2-container type="ghost" scroll>
     <template slot="header">header</template>
     <div class="d2-pt d2-pb">
-      <d2-demo-article/>
+      <el-card shadow="never">
+        <d2-demo-article/>
+      </el-card>
     </div>
     <template slot="footer">footer</template>
   </d2-container>
diff --git a/src/pages/demo/components/container/ghost-slot.vue b/src/pages/demo/components/container/ghost-slot.vue
index 50615cee..34c35de5 100644
--- a/src/pages/demo/components/container/ghost-slot.vue
+++ b/src/pages/demo/components/container/ghost-slot.vue
@@ -2,7 +2,9 @@
   <d2-container type="ghost">
     <template slot="header">header</template>
     <div class="d2-pt d2-pb">
-      <d2-demo-article/>
+      <el-card shadow="never">
+        <d2-demo-article/>
+      </el-card>
     </div>
     <template slot="footer">footer</template>
   </d2-container>
diff --git a/src/pages/demo/components/container/ghost.vue b/src/pages/demo/components/container/ghost.vue
index a5bdac92..4350b187 100644
--- a/src/pages/demo/components/container/ghost.vue
+++ b/src/pages/demo/components/container/ghost.vue
@@ -1,7 +1,9 @@
 <template>
   <d2-container type="ghost">
     <div class="d2-pt d2-pb">
-      <d2-demo-article/>
+      <el-card shadow="never">
+        <d2-demo-article/>
+      </el-card>
     </div>
   </d2-container>
 </template>
diff --git a/src/pages/demo/components/container/md/long.md b/src/pages/demo/components/container/md/long.md
index 5436fc3a..59d2f891 100644
--- a/src/pages/demo/components/container/md/long.md
+++ b/src/pages/demo/components/container/md/long.md
@@ -1,5 +1,3 @@
-下面是一个较长的演示文章，仅仅是为了演示一些文字的显示效果
-
 ## vue.js
 
 **易用**
diff --git a/src/pages/demo/components/container/md/short.md b/src/pages/demo/components/container/md/short.md
new file mode 100644
index 00000000..06496563
--- /dev/null
+++ b/src/pages/demo/components/container/md/short.md
@@ -0,0 +1,17 @@
+## vue.js
+
+**易用**
+
+已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！
+
+**灵活**
+
+不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
+
+**高效**
+
+20kB min+gzip 运行大小
+
+超快虚拟 DOM
+
+最省心的优化
\ No newline at end of file