imrpove dropdown & tabs docs

examples/docs/en-US/dropdown.md

@@ -3,6 +3,9 @@
     methods: {
       handleClick() {
         alert('button click');
+      },
+      handleCommand(command) {
+        this.$message('click on item ' + command);
       }
     }
   }
@@ -126,6 +129,36 @@ Use `hide-on-click` to define if menu closes on clicking.
 ```
 :::
 
+### Command event
+
+Clicking each dropdown item fires an event whose parameter is assigned by each item.
+
+:::demo
+```html
+<el-dropdown @command="handleCommand">
+  <span class="el-dropdown-link">
+    Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>
+  </span>
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item command="a">Action 1</el-dropdown-item>
+    <el-dropdown-item command="b">Action 2</el-dropdown-item>
+    <el-dropdown-item command="c">Action 3</el-dropdown-item>
+    <el-dropdown-item command="d" disabled>Action 4</el-dropdown-item>
+    <el-dropdown-item command="e" divided>Action 5</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+<script>
+  export default {
+    methods: {
+      handleCommand(command) {
+        this.$message('click on item ' + command);
+      }
+    }
+  }
+</script>
+```
+:::
+
 
 ### Dropdown Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |

examples/docs/en-US/tabs.md

@@ -11,6 +11,9 @@
       },
       handleClick(tab, event) {
         console.log(tab, event);
+      },
+      renderTab(h, tab) {
+        return <span><i class="el-icon-date"></i> {tab.label}</span>;
       }
     }
   }
@@ -125,6 +128,30 @@ Border card tabs.
 
 :::
 
+### Custom Tab
+
+You can use `label-content` property to customize the tab
+
+:::demo `label-content` is a render function,which return the vnode of the tab.
+```html
+<el-tabs type="border-card">
+  <el-tab-pane label="Route" :label-content="renderTab">Route</el-tab-pane>
+  <el-tab-pane label="Config">Config</el-tab-pane>
+  <el-tab-pane label="Role">Role</el-tab-pane>
+  <el-tab-pane label="Task">Task</el-tab-pane>
+</el-tabs>
+<script>
+  export default {
+    methods: {
+      renderTab(h, tab) {
+        return <span><i class="el-icon-date"></i> {tab.label}</span>;
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Tabs Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------- |---------- |-------------  |-------- |

examples/docs/zh-CN/dropdown.md

@@ -43,6 +43,9 @@
     methods: {
       handleClick() {
         alert('button click');
+      },
+      handleCommand(command) {
+        this.$message('click on item ' + command);
       }
     }
   }
@@ -168,6 +171,35 @@
 ```
 :::
 
+### 指令事件
+
+点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作
+
+:::demo
+```html
+<el-dropdown @command="handleCommand">
+  <span class="el-dropdown-link">
+    下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>
+  </span>
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item command="a">黄金糕</el-dropdown-item>
+    <el-dropdown-item command="b">狮子头</el-dropdown-item>
+    <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
+    <el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item>
+    <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+<script>
+  export default {
+    methods: {
+      handleCommand(command) {
+        this.$message('click on item ' + command);
+      }
+    }
+  }
+</script>
+```
+:::
 
 ### Dropdown Attributes
 | 参数          | 说明            | 类型            | 可选值                 | 默认值   |

examples/docs/zh-CN/tabs.md

@@ -11,6 +11,9 @@
       },
       handleClick(tab, event) {
         console.log(tab, event);
+      },
+      renderTab(h, tab) {
+        return <span><i class="el-icon-date"></i> {tab.label}</span>;
       }
     }
   }
@@ -120,6 +123,30 @@
 ```
 :::
 
+### 自定义标签页
+
+可以通过 `label-content` 属性来实现自定义标签页的内容
+
+:::demo `label-content` 是一个 render function，在这个方法里返回的 vnode 会被渲染到标签页中。
+```html
+<el-tabs type="border-card">
+  <el-tab-pane label="我的行程" :label-content="renderTab">我的行程</el-tab-pane>
+  <el-tab-pane label="消息中心">消息中心</el-tab-pane>
+  <el-tab-pane label="角色管理">角色管理</el-tab-pane>
+  <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
+</el-tabs>
+<script>
+  export default {
+    methods: {
+      renderTab(h, tab) {
+        return <span><i class="el-icon-date"></i> {tab.label}</span>;
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Tabs Attributes
 | 参数       | 说明     | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |