Homepage: jsfiddle online (#910)

build/cooking.demo.js

@@ -63,18 +63,17 @@ cooking.add('vueMarkdown', {
           var script = striptags.fetch(content, 'script');
           var jsfiddle = { html: html, script: script };
           var descriptionHTML = description
-            ? '<div class="description">' + md.render(description) + '</div>'
+            ? md.render(description)
             : '';
 
           jsfiddle = md.utils.escapeHtml(JSON.stringify(jsfiddle));
 
           return `<demo-block class="demo-box" :jsfiddle="${jsfiddle}">
-                    <div class="source">${html}</div>
+                    <div class="source" slot="source">${html}</div>
-                    <div class="meta">
+                    ${descriptionHTML}
-                      ${descriptionHTML}
+                    <div class="highlight" slot="highlight">`;
-                      <div class="highlight">`;
         }
-        return '</div></div></demo-block>\n';
+        return '</div></demo-block>\n';
       }
     }]
   ],

examples/components/demo-block.vue

@@ -4,8 +4,16 @@
     :class="[blockClass, { 'hover': hovering }]"
     @mouseenter="hovering = true"
     @mouseleave="hovering = false">
-    <el-button class="demo-button" type="text" @click="goJsfiddle">jsfiddle</el-button>
+    <slot name="source"></slot>
-    <slot></slot>
+    <div class="meta">
+      <div class="description">
+        <slot></slot>
+        <el-tooltip effect="dark" content="前往 jsfiddle.net 运行此实例" placement="right">
+          <el-button size="small" type="primary" @click="goJsfiddle">在线运行</el-button>
+        </el-tooltip>
+      </div>
+      <slot name="highlight"></slot>
+    </div>
     <div class="demo-block-control" @click="isExpanded = !isExpanded">
       <transition name="arrow-slide">
         <i :class="[iconClass, { 'hovering': hovering }]"></i>
@@ -60,7 +68,7 @@
       word-break: break-word;
 
       p {
-        margin: 0;
+        margin: 0 0 12px;
       }
 
       code {

examples/docs/zh-CN/loading.md

@@ -75,7 +75,7 @@
       return {
         fullscreenLoading: false
       }
-    }
+    },
     methods: {
       openFullScreen() {
         this.fullscreenLoading = true;

examples/docs/zh-CN/message.md

@@ -108,6 +108,9 @@
 <script>
   export default {
     methods: {
+      open() {
+        this.$message('这是一条消息提示');
+      },
       open2() {
         this.$message({
           message: '恭喜你，这是一条成功消息',

examples/docs/zh-CN/slider.md

@@ -70,7 +70,8 @@
     data() {
       return {
         value1: 0,
-        value2: 50
+        value2: 50,
+        value3: 42
       }
     }
   }
@@ -106,8 +107,8 @@
   export default {
     data() {
       return {
-        value3: 0,
+        value4: 0,
-        value4: 0
+        value5: 0
       }
     }
   }
@@ -134,7 +135,7 @@
   export default {
     data() {
       return {
-        value5: 0
+        value6: 0
       }
     }
   }

examples/docs/zh-CN/tree.md

@@ -206,13 +206,13 @@
           hasChild = Math.random() > 0.5;
         }
 
-        setTimeout(function() {
+        setTimeout(() => {
           var data;
           if (hasChild) {
             data = [{
-              name: 'zone' + count++
+              name: 'zone' + this.count++
             }, {
-              name: 'zone' + count++
+              name: 'zone' + this.count++
             }];
           } else {
             data = [];