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>

examples/docs/en-US/input.md

@@ -83,7 +83,7 @@
 <style>
   .demo-input.demo-en-US {
     .el-select .el-input {
-      width: 100px;
+      width: 120px;
     }
     .text {
       font-size: 14px;
@@ -166,6 +166,16 @@ Input data using mouse or keyboard.
   placeholder="Please input"
   v-model="input">
 </el-input>
+
+<script>
+export default {
+  data() {
+    return {
+      input: ''
+    }
+  }
+}
+</script>
 ```
 :::
 
@@ -179,6 +189,16 @@ Input data using mouse or keyboard.
   v-model="input1"
   :disabled="true">
 </el-input>
+
+<script>
+export default {
+  data() {
+    return {
+      input1: ''
+    }
+  }
+}
+</script>
 ```
 :::
 
@@ -195,6 +215,21 @@ Add an icon to indicate input type.
   v-model="input2"
   @click="handleIconClick">
 </el-input>
+
+<script>
+export default {
+  data() {
+    return {
+      input2: ''
+    }
+  },
+  methods: {
+    handleIconClick(ev) {
+      console.log(ev);
+    }
+  }
+}
+</script>
 ```
 :::
 
@@ -211,7 +246,19 @@ Resizable for entering multiple lines of text information.
   placeholder="Please input"
   v-model="textarea">
 </el-input>
+
+<script>
+export default {
+  data() {
+    return {
+      textarea: ''
+    }
+  }
+}
+</script>
 ```
+:::
+
 ### Mixed input
 
 Prepend or append an element, generally a label or a button.
@@ -226,13 +273,32 @@ Prepend or append an element, generally a label or a button.
   <template slot="append">.com</template>
 </el-input>
 <el-input placeholder="Please input" v-model="input5" style="width: 300px;">
-  <el-select v-model="select" slot="prepend">
-    <el-option label="restaurant" value="1"></el-option>
-    <el-option label="order number" value="2"></el-option>
-    <el-option label="tel" value="3"></el-option>
+  <el-select v-model="select" slot="prepend" placeholder="Select">
+    <el-option label="Restaurant" value="1"></el-option>
+    <el-option label="Order No." value="2"></el-option>
+    <el-option label="Tel" value="3"></el-option>
   </el-select>
   <el-button slot="append" icon="search"></el-button>
 </el-input>
+
+<style>
+.el-select .el-input {
+  width: 120px;
+}
+</style>
+
+<script>
+export default {
+  data() {
+    return {
+      input3: '',
+      input4: '',
+      input5: '',
+      select: ''
+    }
+  }
+}
+</script>
 ```
 :::
 
@@ -261,6 +327,19 @@ Prepend or append an element, generally a label or a button.
     v-model="input9">
   </el-input>
 </div>
+
+<script>
+export default {
+  data() {
+    return {
+      input6: '',
+      input7: '',
+      input8: '',
+      input9: ''
+    }
+  }
+}
+</script>
 ```
 :::
 
@@ -350,8 +429,25 @@ Customize how suggestions are displayed.
   @select="handleSelect"
 ></el-autocomplete>
 
+<style>
+  .my-autocomplete {
+    li {
+      line-height: normal;
+      padding: 7px;
+
+      .value {
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+      .link {
+        font-size: 12px;
+        color: #b4b4b4;
+      }
+    }
+  }
+</style>
+
 <script>
-  var Vue = require('vue');
   Vue.component('my-item-en', {
     functional: true,
     render: function (h, ctx) {
@@ -466,7 +562,7 @@ Search data from server-side.
 ```
 :::
 
-### Input API
+### Input Attributes
 
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 | ----| ----| ----| ---- | ----- |
@@ -494,7 +590,7 @@ Search data from server-side.
 |----| ----| ----|
 |click | triggers when the icon inside Input is clicked | event object |
 
-### Autocomplete API
+### Autocomplete Attributes
 
 Attribute | Description | Type | Options | Default
 |----| ----| ----| ---- | -----|

examples/docs/en-US/layout.md

@@ -34,6 +34,35 @@ Create basic grid layout using columns.
   <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
   <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
 </el-row>
+
+<style>
+  .el-row {
+    margin-bottom: 20px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+  .row-bg {
+    padding: 10px 0;
+    background-color: #f9fafc;
+  }
+</style>
 ```
 :::
 
@@ -49,6 +78,35 @@ Column spacing is supported.
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
 </el-row>
+
+<style>
+  .el-row {
+    margin-bottom: 20px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+  .row-bg {
+    padding: 10px 0;
+    background-color: #f9fafc;
+  }
+</style>
 ```
 :::
 
@@ -73,6 +131,35 @@ Form a more complex hybrid layout by combining the basic 1/24 columns.
   <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
   <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
 </el-row>
+
+<style>
+  .el-row {
+    margin-bottom: 20px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+  .row-bg {
+    padding: 10px 0;
+    background-color: #f9fafc;
+  }
+</style>
 ```
 :::
 
@@ -94,6 +181,35 @@ You can specify column offsets.
 <el-row :gutter="20">
   <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
 </el-row>
+
+<style>
+  .el-row {
+    margin-bottom: 20px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+  .row-bg {
+    padding: 10px 0;
+    background-color: #f9fafc;
+  }
+</style>
 ```
 :::
 
@@ -128,6 +244,35 @@ Flexible alignment of columns.
   <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
 </el-row>
+
+<style>
+  .el-row {
+    margin-bottom: 20px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+  .row-bg {
+    padding: 10px 0;
+    background-color: #f9fafc;
+  }
+</style>
 ```
 :::
 

examples/docs/en-US/loading.md

@@ -65,6 +65,12 @@ Displays animation in a container (such as a table) while loading data.
   </el-table>
 </template>
 
+<style>
+  body {
+    margin: 0;
+  }
+</style>
+
 <script>
   export default {
     data() {

examples/docs/en-US/menu.md

@@ -1,13 +1,13 @@
 <script>
   export default {
     methods: {
-      handleopen(key, keyPath) {
+      handleOpen(key, keyPath) {
         console.log(key, keyPath);
       },
-      handleclose(key, keyPath) {
+      handleClose(key, keyPath) {
         console.log(key, keyPath);
       },
-      handleselect(key, keyPath) {
+      handleSelect(key, keyPath) {
         console.log(key, keyPath);
       }
     }
@@ -24,7 +24,7 @@ Top bar NavMenu can be used in a variety of scenarios.
 
 ::: demo
 ```html
-<el-menu theme="dark" default-active="1" class="el-menu-demo" mode="horizontal" @select="handleselect">
+<el-menu theme="dark" default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">
   <el-menu-item index="1">Processing Center</el-menu-item>
   <el-submenu index="2">
     <template slot="title">Workspace</template>
@@ -35,7 +35,7 @@ Top bar NavMenu can be used in a variety of scenarios.
   <el-menu-item index="3">Orders</el-menu-item>
 </el-menu>
 <div class="line"></div>
-<el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleselect">
+<el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">
   <el-menu-item index="1">Processing Center</el-menu-item>
   <el-submenu index="2">
     <template slot="title">Workspace</template>
@@ -45,8 +45,17 @@ Top bar NavMenu can be used in a variety of scenarios.
   </el-submenu>
   <el-menu-item index="3">Orders </el-menu-item>
 </el-menu>
-```
 
+<script>
+  export default {
+    methods: {
+      handleSelect(key, keyPath) {
+        console.log(key, keyPath);
+      }
+    }
+  }
+</script>
+```
 :::
 
 ### Side bar
@@ -58,7 +67,7 @@ Vertical NavMenu with sub-menus.
 <el-row class="tac">
   <el-col :span="8">
     <h5>With icons</h5>
-    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose">
+    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
       <el-submenu index="1">
         <template slot="title"><i class="el-icon-message"></i>Navigator One</template>
         <el-menu-item-group title="Group One">
@@ -75,7 +84,7 @@ Vertical NavMenu with sub-menus.
   </el-col>
   <el-col :span="8">
     <h5>Without icons</h5>
-    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" theme="dark">
+    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" theme="dark">
       <el-submenu index="1">
         <template slot="title">Navigator One</template>
         <el-menu-item-group title="Group One">
@@ -114,6 +123,19 @@ Vertical NavMenu with sub-menus.
     </el-menu>
   </el-col>
 </el-row>
+
+<script>
+  export default {
+    methods: {
+      handleOpen(key, keyPath) {
+        console.log(key, keyPath);
+      },
+      handleClose(key, keyPath) {
+        console.log(key, keyPath);
+      }
+    }
+  }
+</script>
 ```
 :::
 

examples/docs/en-US/popover.md

@@ -79,22 +79,6 @@
         multipleSelection: [],
         model: ''
       };
-    },
-
-    watch: {
-      singleSelection(val) {
-        console.log('selection: ', val);
-      },
-
-      multipleSelection(val) {
-        console.log('selection: ', val);
-      }
-    },
-
-    events: {
-      handleClick(row) {
-        console.log('you clicked ', row);
-      }
     }
   };
 </script>
@@ -159,6 +143,32 @@ Other components can be nested in popover. Following is an example of nested tab
 </el-popover>
 
 <el-button v-popover:popover4>Click to activate</el-button>
+
+<script>
+  export default {
+    data() {
+      return {
+        gridData: [{
+          date: '2016-05-02',
+          name: 'Jack',
+          address: 'New York City'
+        }, {
+          date: '2016-05-04',
+          name: 'Jack',
+          address: 'New York City'
+        }, {
+          date: '2016-05-01',
+          name: 'Jack',
+          address: 'New York City'
+        }, {
+          date: '2016-05-03',
+          name: 'Jack',
+          address: 'New York City'
+        }]
+      };
+    }
+  };
+</script>
 ```
 :::
 
@@ -181,6 +191,16 @@ Of course, you can nest other operations. It's more light-weight than using a di
 </el-popover>
 
 <el-button v-popover:popover5>Delete</el-button>
+
+<script>
+  export default {
+    data() {
+      return {
+        visible2: false,
+      };
+    }
+  }
+</script>
 ```
 :::
 

examples/docs/en-US/radio.md

@@ -30,7 +30,7 @@ Radio should not have too many options. Otherwise, use the Select component inst
   export default {
     data () {
       return {
-        radio: ''
+        radio: '1'
       };
     }
   }
@@ -73,6 +73,16 @@ Suitable for choosing from some mutually exclusive options.
   <el-radio :label="6">optionB</el-radio>
   <el-radio :label="9">optionC</el-radio>
 </el-radio-group>
+
+<script>
+  export default {
+    data () {
+      return {
+        radio2: 3
+      };
+    }
+  }
+</script>
 ```
 :::
 

examples/docs/en-US/rate.md

@@ -38,6 +38,7 @@ Used for rating
     :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
   </el-rate>
 </div>
+
 <script>
   export default {
     data() {
@@ -63,6 +64,7 @@ Using text to indicate rating score
   :texts="['oops', 'disappointed', 'normal', 'good', 'great']"
   show-text>
 </el-rate>
+
 <script>
   export default {
     data() {
@@ -88,6 +90,7 @@ You can use different icons to distinguish different rate components.
   void-icon-class="icon-rate-face-off"
   :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
 </el-rate>
+
 <script>
   export default {
     data() {
@@ -114,6 +117,7 @@ Read-only Rate is for displaying rating score. Half star is supported.
   text-color="#ff9900"
   text-template="{value} points">
 </el-rate>
+
 <script>
   export default {
     data() {

examples/docs/en-US/switch.md

@@ -29,8 +29,18 @@ Switch is used for switching between two opposing states.
   on-color="#13ce66"
   off-color="#ff4949">
 </el-switch>
-```
 
+<script>
+  export default {
+    data() {
+      return {
+        value1: true,
+        value2: true
+      }
+    }
+  };
+</script>
+```
 :::
 
 ### Disabled
@@ -48,8 +58,17 @@ Switch is used for switching between two opposing states.
   v-model="value3"
   disabled>
 </el-switch>
-```
 
+<script>
+  export default {
+    data() {
+      return {
+        value3: true
+      }
+    }
+  };
+</script>
+```
 :::
 
 ### Attributes

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

@@ -17,6 +17,16 @@ Provide a list of fixed time for users to choose.
   }"
   placeholder="Select time">
 </el-time-select>
+
+<script>
+  export default {
+    data() {
+      return {
+        value1: ''
+      };
+    }
+  }
+</script>
 ```
 :::
 

examples/docs/en-US/tooltip.md

@@ -39,44 +39,6 @@ Tooltip has 9 placements.
 
 :::demo Use attribute `content` to set the display content when hover. The attribute `placement` determines the position of the tooltip. Its value is `[orientation]-[alignment]` with four orientations `top`, `left`, `right`, `bottom` and three alignments `start`, `end`, `null`, and the default alignment is null. Take `placement="left-end"` for example, Tooltip will display on the left of the element which you are hovering and the bottom of the tooltip aligns with the bottom of the element.
 ```html
-<style>
-  .box {
-    width: 400px;
-
-    .top {
-      text-align: center;
-    }
-
-    .left {
-      float: left;
-      width: 110px;
-    }
-
-    .right {
-      float: right;
-      width: 110px;
-    }
-
-    .bottom {
-      clear: both;
-      text-align: center;
-    }
-
-    .item {
-      margin: 4px;
-    }
-    
-    .left .el-tooltip__popper,
-    .right .el-tooltip__popper {
-      padding: 8px 10px;
-    }
-    
-    .el-button {
-      width: 110px;
-    }
-  }
-</style>
-
 <div class="box">
   <div class="top">
     <el-tooltip class="item" effect="dark" content="Top Left prompts info" placement="top-start">
@@ -124,6 +86,44 @@ Tooltip has 9 placements.
     </el-tooltip>
   </div>
 </div>
+
+<style>
+  .box {
+    width: 400px;
+
+    .top {
+      text-align: center;
+    }
+
+    .left {
+      float: left;
+      width: 110px;
+    }
+
+    .right {
+      float: right;
+      width: 110px;
+    }
+
+    .bottom {
+      clear: both;
+      text-align: center;
+    }
+
+    .item {
+      margin: 4px;
+    }
+    
+    .left .el-tooltip__popper,
+    .right .el-tooltip__popper {
+      padding: 8px 10px;
+    }
+    
+    .el-button {
+      width: 110px;
+    }
+  }
+</style>
 ```
 :::
 

examples/docs/zh-CN/badge.md

@@ -36,6 +36,13 @@
     </el-dropdown-item>
   </el-dropdown-menu>
 </el-dropdown>
+
+<style>
+.item {
+  margin-top: 10px;
+  margin-right: 40px;
+}
+</style>
 ```
 :::
 
@@ -51,6 +58,13 @@
 <el-badge :value="100" :max="10" class="item">
   <el-button size="small">回复</el-button>
 </el-badge>
+
+<style>
+.item {
+  margin-top: 10px;
+  margin-right: 40px;
+}
+</style>
 ```
 :::
 
@@ -66,6 +80,13 @@
 <el-badge value="hot" class="item">
   <el-button size="small">回复</el-button>
 </el-badge>
+
+<style>
+.item {
+  margin-top: 10px;
+  margin-right: 40px;
+}
+</style>
 ```
 :::
 
@@ -79,6 +100,13 @@
 <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/zh-CN/card.md

@@ -65,6 +65,29 @@
     {{'列表内容 ' + 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>
 ```
 :::
 
@@ -79,6 +102,20 @@
     {{'列表内容 ' + o }}
   </div>
 </el-card>
+
+<style>
+  .text {
+    font-size: 14px;
+  }
+
+  .item {
+    padding: 18px 0;
+  }
+
+  .box-card {
+    width: 480px;
+  }
+</style>
 ```
 :::
 
@@ -102,6 +139,48 @@
     </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/zh-CN/date-picker.md

@@ -199,6 +199,18 @@
     placeholder="选择年">
   </el-date-picker>
 </div>
+
+<script>
+  export default {
+    data() {
+      return {
+        value3: '',
+        value4: '',
+        value5: ''
+      };
+    }
+  };
+</script>
 ```
 :::
 

examples/docs/zh-CN/dialog.md

@@ -20,11 +20,7 @@
           address: '上海市普陀区金沙江路 1518 弄'
         }],
         dialogVisible: false,
-        dialogTinyVisible: false,
-        dialogFullVisible: false,
-        dialogStubbornVisible: false,
         dialogTableVisible: false,
-        dialogBindVisible: false,
         dialogFormVisible: false,
         form: {
           name: '',
@@ -88,6 +84,16 @@ Dialog 弹出一个对话框，适合需要定制性更大的场景。
     <el-button type="primary" @click.native="dialogVisible = false">确 定</el-button>
   </span>
 </el-dialog>
+
+<script>
+  export default {
+    data() {
+      return {
+        dialogVisible: false
+      };
+    }
+  };
+</script>
 ```
 :::
 
@@ -128,6 +134,45 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
     <el-button type="primary" @click.native="dialogFormVisible = false">确 定</el-button>
   </div>
 </el-dialog>
+
+<script>
+  export default {
+    data() {
+      return {
+        gridData: [{
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }],
+        dialogTableVisible: false,
+        dialogFormVisible: false,
+        form: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        },
+        formLabelWidth: '120px'
+      };
+    }
+  };
+</script>
 ```
 :::
 

examples/docs/zh-CN/input.md

@@ -124,7 +124,7 @@
 <style>
   .demo-input.demo-zh-CN {
     .el-select .el-input {
-      width: 100px;
+      width: 110px;
     }
     .text {
       font-size: 14px;
@@ -315,7 +315,7 @@ export default {
     <template slot="append">.com</template>
   </el-input>
   <el-input placeholder="请输入内容" v-model="input5" style="width: 300px;">
-    <el-select v-model="select" slot="prepend">
+    <el-select v-model="select" slot="prepend" placeholder="请选择">
       <el-option label="餐厅名" value="1"></el-option>
       <el-option label="订单号" value="2"></el-option>
       <el-option label="用户电话" value="3"></el-option>
@@ -732,7 +732,7 @@ export default {
 ```
 :::
 
-### Input API
+### Input Attributes
 
 | 参数          | 说明            | 类型            | 可选值                 | 默认值   |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
@@ -760,7 +760,7 @@ export default {
 | blur | 在 Input 失去焦点时触发 | event |
 | focus | 在 Input 或得焦点时触发 | event |
 
-### Autocomplete API
+### Autocomplete Attributes
 
 | 参数          | 说明            | 类型            | 可选值                 | 默认值   |
 |-------------  |---------------- |---------------- |---------------------- |-------- |

examples/docs/zh-CN/layout.md

@@ -65,6 +65,35 @@
   <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
   <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
 </el-row>
+
+<style>
+  .el-row {
+    margin-bottom: 20px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+  .row-bg {
+    padding: 10px 0;
+    background-color: #f9fafc;
+  }
+</style>
 ```
 :::
 
@@ -80,6 +109,35 @@
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
 </el-row>
+
+<style>
+  .el-row {
+    margin-bottom: 20px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+  .row-bg {
+    padding: 10px 0;
+    background-color: #f9fafc;
+  }
+</style>
 ```
 :::
 
@@ -104,6 +162,35 @@
   <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
   <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
 </el-row>
+
+<style>
+  .el-row {
+    margin-bottom: 20px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+  .row-bg {
+    padding: 10px 0;
+    background-color: #f9fafc;
+  }
+</style>
 ```
 :::
 
@@ -124,6 +211,35 @@
 <el-row :gutter="20">
   <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
 </el-row>
+
+<style>
+  .el-row {
+    margin-bottom: 20px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+  .row-bg {
+    padding: 10px 0;
+    background-color: #f9fafc;
+  }
+</style>
 ```
 :::
 
@@ -158,6 +274,35 @@
   <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
 </el-row>
+
+<style>
+  .el-row {
+    margin-bottom: 20px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+  .row-bg {
+    padding: 10px 0;
+    background-color: #f9fafc;
+  }
+</style>
 ```
 :::
 

examples/docs/zh-CN/loading.md

@@ -69,6 +69,12 @@
   </el-table>
 </template>
 
+<style>
+  body {
+    margin: 0;
+  }
+</style>
+
 <script>
   export default {
     data() {

examples/docs/zh-CN/menu.md

@@ -31,13 +31,13 @@
 <script>
   export default {
     methods: {
-      handleopen(key, keyPath) {
+      handleOpen(key, keyPath) {
         console.log(key, keyPath);
       },
-      handleclose(key, keyPath) {
+      handleClose(key, keyPath) {
         console.log(key, keyPath);
       },
-      handleselect(key, keyPath) {
+      handleSelect(key, keyPath) {
         console.log(key, keyPath);
       }
     }
@@ -54,7 +54,7 @@
 
 ::: demo
 ```html
-<el-menu theme="dark" default-active="1" class="el-menu-demo" mode="horizontal" @select="handleselect">
+<el-menu theme="dark" default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">
   <el-menu-item index="1">处理中心</el-menu-item>
   <el-submenu index="2">
     <template slot="title">我的工作台</template>
@@ -65,7 +65,7 @@
   <el-menu-item index="3">订单管理</el-menu-item>
 </el-menu>
 <div class="line"></div>
-<el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleselect">
+<el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">
   <el-menu-item index="1">处理中心</el-menu-item>
   <el-submenu index="2">
     <template slot="title">我的工作台</template>
@@ -75,6 +75,16 @@
   </el-submenu>
   <el-menu-item index="3">订单管理</el-menu-item>
 </el-menu>
+
+<script>
+  export default {
+    methods: {
+      handleSelect(key, keyPath) {
+        console.log(key, keyPath);
+      }
+    }
+  }
+</script>
 ```
 :::
 
@@ -87,7 +97,7 @@
 <el-row class="tac">
   <el-col :span="8">
     <h5>带 icon</h5>
-    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose">
+    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
       <el-submenu index="1">
         <template slot="title"><i class="el-icon-message"></i>导航一</template>
         <el-menu-item-group title="分组一">
@@ -104,7 +114,7 @@
   </el-col>
   <el-col :span="8">
     <h5>不带 icon</h5>
-    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" theme="dark">
+    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" theme="dark">
       <el-submenu index="1">
         <template slot="title">导航一</template>
         <el-menu-item-group title="分组一">
@@ -143,6 +153,19 @@
     </el-menu>
   </el-col>
 </el-row>
+
+<script>
+  export default {
+    methods: {
+      handleOpen(key, keyPath) {
+        console.log(key, keyPath);
+      },
+      handleClose(key, keyPath) {
+        console.log(key, keyPath);
+      }
+    }
+  }
+</script>
 ```
 :::
 

examples/docs/zh-CN/popover.md

@@ -170,6 +170,32 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
 </el-popover>
 
 <el-button v-popover:popover4>click 激活</el-button>
+
+<script>
+  export default {
+    data() {
+      return {
+        gridData: [{
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }]
+      };
+    }
+  };
+</script>
 ```
 :::
 
@@ -192,6 +218,16 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
 </el-popover>
 
 <el-button v-popover:popover5>删除</el-button>
+
+<script>
+  export default {
+    data() {
+      return {
+        visible2: false,
+      };
+    }
+  }
+</script>
 ```
 :::
 

examples/docs/zh-CN/rate.md

@@ -57,6 +57,17 @@
     :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
   </el-rate>
 </div>
+
+<script>
+  export default {
+    data() {
+      return {
+        value1: null,
+        value2: null
+      }
+    }
+  }
+</script>
 ```
 :::
 
@@ -70,6 +81,16 @@
   v-model="value3"
   show-text>
 </el-rate>
+
+<script>
+  export default {
+    data() {
+      return {
+        value3: null
+      }
+    }
+  }
+</script>
 ```
 :::
 
@@ -85,6 +106,16 @@
   void-icon-class="icon-rate-face-off"
   :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
 </el-rate>
+
+<script>
+  export default {
+    data() {
+      return {
+        value4: null
+      }
+    }
+  }
+</script>
 ```
 :::
 
@@ -101,6 +132,16 @@
   text-color="#ff9900"
   text-template="{value}">
 </el-rate>
+
+<script>
+  export default {
+    data() {
+      return {
+        value5: 3.7
+      }
+    }
+  }
+</script>
 ```
 :::
 

examples/docs/zh-CN/switch.md

@@ -37,6 +37,17 @@
   on-color="#13ce66"
   off-color="#ff4949">
 </el-switch>
+
+<script>
+  export default {
+    data() {
+      return {
+        value1: true,
+        value2: true
+      }
+    }
+  };
+</script>
 ```
 :::
 
@@ -55,6 +66,16 @@
   v-model="value3"
   disabled>
 </el-switch>
+
+<script>
+  export default {
+    data() {
+      return {
+        value3: true
+      }
+    }
+  };
+</script>
 ```
 :::
 

examples/docs/zh-CN/time-picker.md

@@ -25,6 +25,16 @@
   }"
   placeholder="选择时间">
 </el-time-select>
+
+<script>
+  export default {
+    data() {
+      return {
+        value1: ''
+      };
+    }
+  }
+</script>
 ```
 :::
 

examples/docs/zh-CN/tooltip.md

@@ -107,6 +107,40 @@
     </el-tooltip>
   </div>
 </div>
+
+<style>
+  .box {
+    width: 400px;
+
+    .top {
+      text-align: center;
+    }
+
+    .left {
+      float: left;
+      width: 60px;
+    }
+
+    .right {
+      float: right;
+      width: 60px;
+    }
+
+    .bottom {
+      clear: both;
+      text-align: center;
+    }
+
+    .item {
+      margin: 4px;
+    }
+    
+    .left .el-tooltip__popper,
+    .right .el-tooltip__popper {
+      padding: 8px 10px;
+    }
+  }
+</style>
 ```
 :::
 

examples/i18n/component.json

@@ -5,7 +5,7 @@
       "hide-text": "隐藏代码",
       "show-text": "显示代码",
       "button-text": "在线运行",
-      "tooltip-text": "前往 jsfiddle.net 运行此实例"
+      "tooltip-text": "前往 jsfiddle.net 运行此示例"
     },
     "footer": {
       "feedback": "反馈建议",