JSFiddle: add missing <style> and <script>

examples/docs/en-US/badge.md

@@ -31,6 +31,13 @@ Displays the amount of new messages.
     </el-dropdown-item>
   </el-dropdown-menu>
 </el-dropdown>
+
+<style>
+.item {
+  margin-top: 10px;
+  margin-right: 40px;
+}
+</style>
 ```
 :::
 
@@ -47,6 +54,13 @@ You can customize the max value.
 <el-badge :value="100" :max="10" class="item">
   <el-button size="small">replies</el-button>
 </el-badge>
+
+<style>
+.item {
+  margin-top: 10px;
+  margin-right: 40px;
+}
+</style>
 ```
 :::
 
@@ -63,6 +77,13 @@ Displays text content other than numbers.
 <el-badge value="hot" class="item">
   <el-button size="small">replies</el-button>
 </el-badge>
+
+<style>
+.item {
+  margin-top: 10px;
+  margin-right: 40px;
+}
+</style>
 ```
 :::
 
@@ -77,6 +98,13 @@ Use a red dot to mark content that needs to be noticed.
 <el-badge is-dot class="item">
   <el-button class="share-button" icon="share" type="primary"></el-button>
 </el-badge>
+
+<style>
+.item {
+  margin-top: 10px;
+  margin-right: 40px;
+}
+</style>
 ```
 :::
 

examples/docs/en-US/card.md

@@ -64,6 +64,29 @@ Card includes title, content and operations.
     {{'List item ' + o }}
   </div>
 </el-card>
+
+<style>
+  .text {
+    font-size: 14px;
+  }
+
+  .item {
+    padding: 18px 0;
+  }
+
+  .clearfix:before,
+  .clearfix:after {
+      display: table;
+      content: "";
+  }
+  .clearfix:after {
+      clear: both
+  }
+
+  .box-card {
+    width: 480px;
+  }
+</style>
 ```
 :::
 
@@ -78,6 +101,20 @@ The header part can be omitted.
     {{'List item ' + o }}
   </div>
 </el-card>
+
+<style>
+  .text {
+    font-size: 14px;
+  }
+
+  .item {
+    padding: 18px 0;
+  }
+
+  .box-card {
+    width: 480px;
+  }
+</style>
 ```
 :::
 
@@ -101,6 +138,48 @@ Display richer content by adding some configs.
     </el-card>
   </el-col>
 </el-row>
+
+<style>
+  .time {
+    font-size: 13px;
+    color: #999;
+  }
+  
+  .bottom {
+    margin-top: 13px;
+    line-height: 12px;
+  }
+
+  .button {
+    padding: 0;
+    float: right;
+  }
+
+  .image {
+    width: 100%;
+    display: block;
+  }
+
+  .clearfix:before,
+  .clearfix:after {
+      display: table;
+      content: "";
+  }
+  
+  .clearfix:after {
+      clear: both
+  }
+</style>
+
+<script>
+export default {
+  data() {
+    return {
+      currentDate: new Date()
+    };
+  }
+}
+</script>
 ```
 :::
 

examples/docs/en-US/date-picker.md

@@ -162,6 +162,18 @@ You can choose week, month or year by extending the standard date picker compone
     placeholder="Pick a year">
   </el-date-picker>
 </div>
+
+<script>
+  export default {
+    data() {
+      return {
+        value3: '',
+        value4: '',
+        value5: ''
+      };
+    }
+  };
+</script>
 ```
 
 :::

examples/docs/en-US/dialog.md

@@ -20,11 +20,7 @@
           address: 'No.1518,  Jinshajiang Road, Putuo District'
         }],
         dialogVisible: false,
-        dialogTinyVisible: false,
-        dialogFullVisible: false,
-        dialogStubbornVisible: false,
         dialogTableVisible: false,
-        dialogBindVisible: false,
         dialogFormVisible: false,
         form: {
           name: '',
@@ -60,13 +56,23 @@ Dialog pops up a dialog box, and it's quite customizable.
 ```html
 <el-button type="text" @click.native="dialogVisible = true">click to open the Dialog</el-button>
 
-<el-dialog title="tips" v-model="dialogVisible" size="tiny">
+<el-dialog title="Tips" v-model="dialogVisible" size="tiny">
   <span>This is a message</span>
   <span slot="footer" class="dialog-footer">
     <el-button @click.native="dialogVisible = false">Cancel</el-button>
     <el-button type="primary" @click.native="dialogVisible = false">Confirm</el-button>
   </span>
 </el-dialog>
+
+<script>
+  export default {
+    data() {
+      return {
+        dialogVisible: false
+      };
+    }
+  };
+</script>
 ```
 :::
 
@@ -108,6 +114,45 @@ The content of Dialog can be anything, even a table or a form. This example show
     <el-button type="primary" @click.native="dialogFormVisible = false">Confirm</el-button>
   </span>
 </el-dialog>
+
+<script>
+  export default {
+    data() {
+      return {
+        gridData: [{
+          date: '2016-05-02',
+          name: 'John Smith',
+          address: 'No.1518,  Jinshajiang Road, Putuo District'
+        }, {
+          date: '2016-05-04',
+          name: 'John Smith',
+          address: 'No.1518,  Jinshajiang Road, Putuo District'
+        }, {
+          date: '2016-05-01',
+          name: 'John Smith',
+          address: 'No.1518,  Jinshajiang Road, Putuo District'
+        }, {
+          date: '2016-05-03',
+          name: 'John Smith',
+          address: 'No.1518,  Jinshajiang Road, Putuo District'
+        }],
+        dialogTableVisible: false,
+        dialogFormVisible: false,
+        form: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        },
+        formLabelWidth: '120px'
+      };
+    }
+  };
+</script>
 ```
 :::
 

examples/docs/en-US/form.md

@@ -718,6 +718,7 @@ Form component allows you to verify your data, helping you find and correct erro
   }
 </script>
 ```
+:::
 
 ### Delete or add form items dynamically
 

examples/docs/en-US/input-number.md

@@ -35,9 +35,9 @@ Input numerical values with a customizable range.
       };
     },
     methods: {
-    	handleChange() {
-    		console.log(this.num1)
-    	}
+      handleChange(value) {
+        console.log(value)
+      }
     }
   };
 </script>