diff --git a/docs/ExamplesDocsApp.vue b/docs/ExamplesDocsApp.vue
index 31f8d5860..11f5dafca 100644
--- a/docs/ExamplesDocsApp.vue
+++ b/docs/ExamplesDocsApp.vue
@@ -1,7 +1,17 @@
 <template>
   <div class="app">
     <div class="page-header">
-      header
+      <h1 class="page-header-logo">
+        <a href="#"></a>
+      </h1>
+      <ul class="page-header-navs">
+        <li>
+          <a href="#">首页</a>
+        </li>
+        <li>
+          <a href="#" class="active">组件</a>
+        </li>
+      </ul>
     </div>
     <div class="main-content">
       <div class="page-container clearfix">
@@ -13,7 +23,6 @@
       </div>
     </div>
     <div class="page-footer">
-      footer
     </div>
   </div>
 </template>
diff --git a/docs/assets/docs.css b/docs/assets/docs.css
index 461e2b1db..0d9ba48fa 100644
--- a/docs/assets/docs.css
+++ b/docs/assets/docs.css
@@ -68,7 +68,43 @@ ul, ol {
 
 .page-header {
   height: 60px;
-  background-color: #fff;
+  background-color: #fbfbfb;
+  overflow: hidden;
+}
+
+.page-header-logo {
+  float: left;
+
+  > a {
+    display: block;
+    width: 78px;
+    height: 20px;
+    background-image: url(https://img.yzcdn.cn/upload_files/2017/03/30/Fjm3aSwID8ROIV_5TO6dZdJ_IEgz.png);
+    background-size: contain;
+    background-repeat: no-repeat;
+    margin: 20px 0 0 20px;
+  }
+}
+
+.page-header-navs {
+  float: right;
+  margin-right: 50px;
+
+  li {
+    float: left;
+  }
+
+  a {
+    display: block;
+    line-height: 60px;
+    color: #333;
+    font-size: 16px;
+    margin: 0 35px;
+
+    &.active {
+      color: #3388FF;
+    }
+  }
 }
 
 .main-content {
@@ -213,7 +249,7 @@ ul, ol {
 }
 
 .page-footer {
-  height: 150px;
+  height: 72px;
   margin-top: 40px;
-  background-color: #fff;
+  background-color: #34383B;
 }
diff --git a/docs/examples-dist/datetime-picker.vue b/docs/examples-dist/datetime-picker.vue
index 2bbd5265f..2ccbf84f4 100644
--- a/docs/examples-dist/datetime-picker.vue
+++ b/docs/examples-dist/datetime-picker.vue
@@ -1,5 +1,5 @@
 <template><section class="demo-datetime-picker"><h1 class="demo-title">datetime-picker</h1><example-block title="基础用法">
-                <zan-datetime-picker type="time" :min-hour="minHour" :max-hour="maxHour" :min-date="minDate" @change="handlePickerChange">  
+                <zan-datetime-picker v-model="currentDate" type="datetime" format="yyyy.mm.dd hh时 mm分" :min-hour="minHour" :max-hour="maxHour" :min-date="minDate" @change="handlePickerChange">  
 </zan-datetime-picker>
 
 
@@ -13,7 +13,8 @@ export default {
     return {
       minHour: 10,
       maxHour: 20,
-      minDate: new Date()
+      minDate: new Date(),
+      currentDate: null
     };
   },
 
diff --git a/docs/examples-dist/progress.vue b/docs/examples-dist/progress.vue
index 5f2575f0b..678d1d2c5 100644
--- a/docs/examples-dist/progress.vue
+++ b/docs/examples-dist/progress.vue
@@ -19,9 +19,9 @@
 <div class="demo-progress__wrapper">
   <zan-progress class="demo-progress__demo1" :inactive="true" :percentage="100"></zan-progress>
 </div>
+
               </example-block><example-block title="自定义颜色">
-                
-<div class="demo-progress__wrapper">
+                <div class="demo-progress__wrapper">
   <zan-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></zan-progress>
 </div>
 <div class="demo-progress__wrapper">
diff --git a/docs/examples-docs/tab.md b/docs/examples-docs/tab.md
index 78e835f64..2a82e0a52 100644
--- a/docs/examples-docs/tab.md
+++ b/docs/examples-docs/tab.md
@@ -1,3 +1,4 @@
+
 <style>
 @component-namespace demo {
   @b tab {
@@ -24,6 +25,10 @@ export default {
   methods: {
     popalert() {
       alert('haha')
+    },
+
+    handleTabClick(index) {
+      alert(index);
     }
   }
 };
@@ -43,9 +48,10 @@ export default {
   <zan-tab title="选项五">内容五</zan-tab>
 </zan-tabs>
 ```
-
 :::
+
 ### 禁用用法
+
 :::demo 禁用用法
 ```html
 <zan-tabs :active="active">
@@ -68,6 +74,7 @@ export default {
 :::
 
 ### card样式用法
+
 :::demo card样式用法
 ```html
 <zan-tabs type="card">
@@ -100,6 +107,7 @@ export default {
 </style>
 
 ### 自定义样式用法
+
 :::demo 自定义样式用法
 ```html
 <zan-tabs active="2" navclass="custom-tabwrap">
@@ -131,6 +139,30 @@ export default {
 ```
 :::
 
+### click事件
+
+:::demo click事件
+```html
+<zan-tabs @click="handleTabClick">
+  <zan-tab title="选项一">内容一</zan-tab>
+  <zan-tab title="选项二">内容二</zan-tab>
+  <zan-tab title="选项三">内容三</zan-tab>
+  <zan-tab title="选项四">内容四</zan-tab>
+  <zan-tab title="选项五">内容五</zan-tab>
+</zan-tabs>
+
+<script>
+export default {
+  methods: {
+    handleTabClick(index) {
+      alert(index);
+    }
+  }
+};
+</script>
+```
+:::
+
 ### zan-tabs API
 
 | 参数       | 说明      | 类型       | 默认值       | 可选      |
diff --git a/packages/tab/src/tabs.vue b/packages/tab/src/tabs.vue
index b78264e4f..af5f78f79 100644
--- a/packages/tab/src/tabs.vue
+++ b/packages/tab/src/tabs.vue
@@ -7,7 +7,7 @@
         class="zan-tab"
         :class="{'zan-tab--active': index == switchActiveTabKey}"
         ref="tabkey"
-        @click="handleTabClick(index,tab)"
+        @click="handleTabClick(index, tab)"
       >
         {{ tab.title }}
       </div>
@@ -76,6 +76,7 @@
           el.$emit('disable');
           return;
         }
+        this.$emit('click', index);
         this.switchActiveTabKey = index;
       }
     },