diff --git a/docs/examples-docs/tab.md b/docs/examples-docs/tab.md
index a6f3f2735..60d94bd4f 100644
--- a/docs/examples-docs/tab.md
+++ b/docs/examples-docs/tab.md
@@ -2,25 +2,90 @@
 
 ### 基础用法
 
+:::demo 基础用法
 ```html
 <zan-tabs>
-  <zan-tab tab-key="0" title="选项一">内容一</zan-tab>
-  <zan-tab tab-key="1" title="选项二">内容二</zan-tab>
-  <zan-tab tab-key="2" title="选项三">内容三</zan-tab>
-  <zan-tab tab-key="3" title="选项四">内容四</zan-tab>
-  <zan-tab tab-key="4" title="选项五">内容五</zan-tab>
+  <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: {
+    popalert() {
+      alert('haha')
+    }
+  }
+};
+</script>
+:::
+### 禁用用法
+:::demo 禁用用法
 ```html
-<zan-tabs active-tab-key="2" tabs-class-name="custom-tabwrap" tab-class-name="custom-tab">
-    <zan-tab tab-key="0" title="选项一" tab-pane-class-name="custom-pane">内容一</zan-tab>
-    <zan-tab tab-key="1" title="选项二" tab-pane-class-name="custom-pane">内容二</zan-tab>
-    <zan-tab tab-key="2" title="选项三" tab-pane-class-name="custom-pane">内容三</zan-tab>
-    <zan-tab tab-key="3" title="选项四" tab-pane-class-name="custom-pane">内容四</zan-tab>
-    <zan-tab tab-key="4" title="选项五" tab-pane-class-name="custom-pane">内容五</zan-tab>
+<zan-tabs>
+  <zan-tab title="选项一">内容一</zan-tab>
+  <zan-tab disable title="选项二" @ondisable="popalert">内容二</zan-tab>
+  <zan-tab title="选项三">内容三</zan-tab>
+  <zan-tab title="选项四">内容四</zan-tab>
+  <zan-tab title="选项五">内容五</zan-tab>
+</zan-tabs>
+<script>
+export default {
+  methods: {
+    popalert() {
+      alert('haha')
+    }
+  }
+};
+</script>
+```
+:::
+
+### card样式用法
+:::demo card样式用法
+```html
+<zan-tabs classtype="card">
+  <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>
+```
+:::
+<style>
+  .page-tab {
+    padding: 0 15px;
+  }
+  .custom-tabwrap .zan-tab-active{
+    color: #20a0ff;
+  }
+  .custom-tabwrap .zan-tabs-nav-bar{
+    background: #20a0ff;
+  }
+  .custom-tab {
+    font-weight: bold;
+  }
+  .custom-pane {
+    text-align: center;
+    height: 50px;
+    line-height: 50px;
+  }
+</style>
+
+### 自定义样式用法
+:::demo 自定义样式用法
+```html
+<zan-tabs active="2" classname="custom-tabwrap">
+    <zan-tab title="选项一" paneclass="custom-pane">内容一</zan-tab>
+    <zan-tab title="选项二" paneclass="custom-pane">内容二</zan-tab>
+    <zan-tab title="选项三" paneclass="custom-pane">内容三</zan-tab>
+    <zan-tab title="选项四" paneclass="custom-pane">内容四</zan-tab>
+    <zan-tab title="选项五" paneclass="custom-pane">内容五</zan-tab>
 </zan-tabs>
 <style>
   .page-tab {
@@ -42,19 +107,21 @@
   }
 </style>
 ```
-
+:::
 
 ### zan-tabs API
 
-| 参数       | 说明      | 类型       | 默认值       | 必须      |
+| 参数       | 说明      | 类型       | 默认值       | 可选      |
 |-----------|-----------|-----------|-------------|-------------|
-| active-key | 激活的badge的索引 | string  | '0'但必须子badge里的mark是有0位索引 |           |
+| classtype | 两种UI | string  | line |     card      |
+| active | 默认激活的tab | string || number  | 0 |           |
+| classname | tabs自定义classname | string  | '' |           |
 
 
-### z-badge API
+### zan-tab API
 | 参数       | 说明      | 类型       | 默认值       | 必须       |
 |-----------|-----------|-----------|-------------|-------------|
-| mark | badge的唯一key值 | string  | ''          | required         |
-| title | badge的文案标题 | string  | ''          | required          |
-| info | 当前badge的提示消息数量 | string  | ''          |           |
-| url | 跳转链接 | string  | 全连接直接跳转或者hash          |           |
+| title | tab的标题 | string  | ''          | required         |
+| paneclass | 底部内容区的classname | string  | ''          |           |
+| disable | 是否禁用这个tab | Boolean  | false      |           |
+
diff --git a/packages/tab/src/tab.vue b/packages/tab/src/tab.vue
index ed9dd328b..196173c29 100644
--- a/packages/tab/src/tab.vue
+++ b/packages/tab/src/tab.vue
@@ -8,30 +8,26 @@
   export default {
     name: 'zan-tab',
     props: {
-      // 对应 Tabs 组件的 activeKey
-      tabKey: {
-        type: [Number, String],
-        required: true
-      },
       // 选项卡头显示文字
       title: {
         type: String,
         required: true
       },
-      tabPaneClassName: {
+      paneclass: {
         type: String
-      }
+      },
+      disable: Boolean
     },
     computed: {
       classNames() {
         return [
-          {'is-select': this.tabKey == this.$parent.switchActiveTabKey},
-          this.tabPaneClassName
+          {'is-select': this.$parent.tabs.indexOf(this) == this.$parent.switchActiveTabKey },
+          this.paneclass
         ];
       }
     },
     created () {
-      this.$parent.tabCreate(this.tabKey, this.title);
+      this.$parent.tabs.push(this);
     }
   };
 </script>
diff --git a/packages/tab/src/tabs.vue b/packages/tab/src/tabs.vue
index ac87fe140..bd79fb80b 100644
--- a/packages/tab/src/tabs.vue
+++ b/packages/tab/src/tabs.vue
@@ -3,11 +3,11 @@
     <div class="zan-tabs-nav" :class="classNames">
       <div class="zan-tabs-nav-bar" :style="navBarStyle"></div>
       <div
-        v-for="tab in tabs"
-        class="zan-tab J-tab-key"
-        :class="[{'zan-tab-active': tab.tabKey == switchActiveTabKey}, tabClassName]"
-        :data-key="tab.tabKey"
-        @click="handleTabClick(tab.tabKey)"
+        v-for="(tab, index) in tabs"
+        class="zan-tab"
+        :class="{'zan-tab-active': index == switchActiveTabKey}"
+        ref="tabkey"
+        @click="handleTabClick(index,tab)"
       >
         {{ tab.title }}
       </div>
@@ -21,41 +21,36 @@
     name: 'zan-tabs',
     props: {
       // 外部传入的激活的tab标签
-      activeTabKey: {
+      active: {
         type: [Number, String],
         default: 0
       },
       // 是默认的line还是card
-      classType: {
+      classtype: {
         type: String,
         default: 'line'
       },
       // nav的wrap的样式
-      tabsClassName: {
+      classname: {
         type: String,
         default: ''
-      },
-      // 每个nav里tab的样式
-      tabClassName: {
-        type: String
       }
     },
     data() {
       return {
         tabs: [],
         isReady: false,
-        switchActiveTabKey: this.activeTabKey
+        switchActiveTabKey: this.active
       };
     },
     computed: {
       classNames () {
-        return [ `zan-tabs-${this.classType}`, this.tabsClassName ]
+        return [ `zan-tabs-${this.classtype}`, this.classname ]
       },
       navBarStyle () {
         if(!this.isReady) return;
         let tabKey = this.switchActiveTabKey;
-        let selectors = `.J-tab-key[data-key="${tabKey}"]`;
-        let elem = this.$el.querySelector(selectors) || {};
+        let elem = this.$refs.tabkey[tabKey];
         let w = `${elem.offsetWidth || 0}px`;
         let x = `${elem.offsetLeft || 0}px`;
         return {
@@ -65,14 +60,12 @@
       }
     },
     methods: {
-      tabCreate (tabKey, title) {
-        this.tabs.push({
-          tabKey: tabKey,
-          title: title
-        });
-      },
-      handleTabClick(tabKey) {
-        this.switchActiveTabKey = tabKey;
+      handleTabClick(index, el) {
+        if(el.disable) {
+          el.$emit('ondisable');
+          return 
+        }
+        this.switchActiveTabKey = index;
       }
     },
     mounted () {
diff --git a/src/index.js b/src/index.js
index 4503f31bd..71103a6fb 100644
--- a/src/index.js
+++ b/src/index.js
@@ -23,6 +23,7 @@ import Search from '../packages/search/index.js';
 import Step from '../packages/step/index.js';
 import Tabs from '../packages/tabs/index.js';
 import Tab from '../packages/tab/index.js';
+import Lazyload from '../packages/lazyload/index.js';
 import ImagePreview from '../packages/image-preview/index.js';
 import Col from '../packages/col/index.js';
 import Row from '../packages/row/index.js';
@@ -92,6 +93,7 @@ module.exports = {
   Step,
   Tabs,
   Tab,
+  Lazyload,
   ImagePreview,
   Col,
   Row,