优化演示功能

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

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>
+

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>

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>

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>

src/pages/demo/components/container/md/long.md

@@ -1,5 +1,3 @@
-下面是一个较长的演示文章，仅仅是为了演示一些文字的显示效果
-
 ## vue.js
 
 **易用**

src/pages/demo/components/container/md/short.md

@@ -0,0 +1,17 @@
+## vue.js
+
+**易用**
+
+已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！
+
+**灵活**
+
+不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
+
+**高效**
+
+20kB min+gzip 运行大小
+
+超快虚拟 DOM
+
+最省心的优化