Merge branch 'master' of github.com:savoygu/vue-demonstration

Author: savoygu

example/src/App.vue

@@ -246,6 +246,14 @@
         通过 <code>slot="table"</code> 添加表格， 通过 <code>class="vd-demo__table"</code> 设置表格样式，还可以通过 <code>class="vd-demo__new"</code> 增加特殊标识。
       </template>
     </vue-demonstration>
+    <vue-demonstration
+        anchor="zhan-shi-code"
+        :show-content="false"
+        :code="sourcecodeK">
+      <template slot="title">
+        展示代码 <i class="vd-demo__new">（1.0.2 新增）</i>
+      </template>
+    </vue-demonstration>
     <vue-demonstration
         anchor="attributes"
         title="Attributes"
@@ -261,7 +269,7 @@
           </thead>
           <tbody>
           <tr>
-            <td>multiple <i class="vd-demo__new">（特殊标识）</i></td>
+            <td>multiple</td>
             <td>是否同时展示多个示例</td>
             <td>boolean</td>
             <td>—</td>
@@ -273,7 +281,15 @@
             <td>string</td>
             <td>—</td>
             <td>—</td>
-          </tr><tr>
+          </tr>
+          <tr>
+            <td>code<i class="vd-demo__new">（1.0.2 新增）</i></td>
+            <td>要展示的代码片段</td>
+            <td>string</td>
+            <td>—</td>
+            <td>—</td>
+          </tr>
+          <tr>
             <td>tag</td>
             <td>标题标签</td>
             <td>string</td>
@@ -329,7 +345,11 @@
           <th>参数</th>
           <th>说明</th>
           </thead>
-          <tbody>
+          <tbody>          
+          <tr>
+            <td>title <i class="vd-demo__new">（1.0.1 新增）</i></td>
+            <td>标题</td>
+          </tr>
           <tr>
             <td>description</td>
             <td>标题描述</td>
@@ -365,7 +385,8 @@
       sourcecodeG,
       sourcecodeH,
       sourcecodeI,
-      sourcecodeJ
+      sourcecodeJ,
+      sourcecodeK
   } from './template'
 
   export default {
@@ -381,7 +402,8 @@
         sourcecodeG,
         sourcecodeH,
         sourcecodeI,
-        sourcecodeJ
+        sourcecodeJ,
+        sourcecodeK
       }
     }
   }

example/src/template.js

@@ -261,4 +261,6 @@ export const sourcecodeJ = `<vue-demonstration
   <template slot="explanation">
     通过 <code>slot="table"</code> 添加表格， 通过 <code>class="vd-demo__table"</code> 设置表格样式，还可以通过 <code>class="vd-demo__new"</code> 增加特殊标识。
   </template>
-</vue-demonstration>`
+</vue-demonstration>`
+
+export const sourcecodeK = `import VueDemonstration from 'vue-demonstration'`

lib/vue-demonstration.js

@@ -1,7 +1,7 @@
 {
   "name": "vue-demonstration",
   "description": "Vue-based element docs's demo code style component, asily add examples to your vue project to show your code.",
-  "version": "1.0.0",
+  "version": "1.0.4",
   "author": "savoygu",
   "main": "lib/vue-demonstration.js",
   "files": [

package.json

@@ -3,11 +3,16 @@
     <vd-demo-title
         :title="title"
         :anchor="anchor"
-        :tag="tag"></vd-demo-title>
+        :tag="tag"
+        :has-slot="!!$slots.title"></vd-demo-title>
     <vd-demo-description
-      :description="description"
-      :has-slot="!!$slots.description">
+        :description="description"
+        :has-slot="!!$slots.description">
     </vd-demo-description>
+    <div class="vd-demo__code" v-if="code">
+      <pre v-highlightjs="code"><code class="html language-javascript"></code></pre>
+    </div>
+    <slot></slot>
     <slot name="table"></slot>
     <div class="vd-demo__content" v-if="showContent">
       <div class="vd-demo__source" :style="{padding: multiple ? '0' : '24px'}" ref="source">
@@ -45,6 +50,7 @@
     props: {
       multiple: Boolean,
       highlight: String,
+      code: String,
       tag: {
         type: String,
         default: 'h3'
@@ -53,8 +59,14 @@
         type: String,
         default: ''
       },
-      title: String,
-      description: String,
+      title: {
+        type: String,
+        default: ''
+      },
+      description: {
+        type: String,
+        default: ''
+      },
       showContent: {
         type: Boolean,
         default: true
@@ -74,9 +86,9 @@
       if (source) {
         let blocks = source.querySelectorAll('.vd-demo__block-1')
         if (
-            blocks.length
-            && blocks.length % 2 === 1
-            && blocks.length - 2 > 0
+          blocks.length
+          && blocks.length % 2 === 1
+          && blocks.length - 2 > 0
         ) {
           blocks[blocks.length - 2].style.borderBottom = '1px solid #eff2f6'
         }
@@ -101,28 +113,29 @@
         props: {
           title: String,
           anchor: String,
-          tag: String
+          tag: String,
+          hasSlot: Boolean
         },
         render (h) {
-          if (this.title) {
+          if (this.title || this.hasSlot) {
             return h(this.tag, {
+                attrs: {
+                  id: this.anchor
+                }
+              },
+              [
+                h('a', {
                   attrs: {
-                    id: this.anchor
+                    href: '#' + this.anchor,
+                    'aria-hidden': true,
+                    class: 'header-anchor'
+                  },
+                  domProps: {
+                    innerHTML: '¶'
                   }
-                },
-                [
-                  h('a', {
-                    attrs: {
-                      href: '#' + this.anchor,
-                      'aria-hidden': true,
-                      class: 'header-anchor'
-                    },
-                    domProps: {
-                      innerHTML: '¶'
-                    }
-                  }),
-                  this.title
-                ])
+                }),
+                this.title ? this.title : this.$parent.$slots.title
+              ])
           }
           return ''
         }
@@ -149,13 +162,15 @@
               }
             }, this.$parent.$slots.description)
           }
+          return ''
         }
       }
     }
   }
 </script>
 <style lang="less" rel="stylesheet/less">
   @import "../styles/less/style";
+
   .vd-demo {
     width: 1000px;
     margin: 0 auto;
@@ -309,6 +324,21 @@
         line-height: 18px;
       }
     }
+    &__code {
+      pre {
+        .hljs {
+          line-height: 1.8;
+          font-family: Menlo, Monaco, Consolas, Courier, monospace;
+          font-size: 12px;
+          padding: 18px 24px;
+          background-color: #f9fafc;
+          border: 1px solid #eaeefb;
+          margin-bottom: 25px;
+          border-radius: 4px;
+          -webkit-font-smoothing: auto;
+        }
+      }
+    }
     &__highlight {
       width: 60%;
       border-right: 1px solid #eaeefb;