fix build

docs/examples-docs/tab.md

@@ -1,4 +1,3 @@
-
 <style>
 @component-namespace demo {
   @b tab {
@@ -6,6 +5,22 @@
       background-color: #fff;
       padding: 20px;
     }
+
+    .zan-tabs--card .zan-tab__pane {
+      background-color: transparent;
+    }
+
+    .custom-tabwrap .zan-tab-active {
+      color: #20a0ff;
+    }
+    .custom-tabwrap .zan-tabs-nav-bar {
+      background: #20a0ff;
+    }
+    .custom-pane {
+      text-align: center;
+      height: 50px;
+      line-height: 50px;
+    }
   }
 }
 </style>
@@ -36,7 +51,43 @@ export default {
 
 ## Tab 标签
 
-### 基础用法
+### 使用指南
+
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Tab`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Tab`组件了：
+
+```js
+import Vue from 'vue';
+import { Tab, Tabs } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/tab.css';
+
+Vue.component(Tab.name, Tab);
+Vue.component(Tabs.name, Tabs);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Tab`组件，这样只能在你注册的组件中使用`Tab`：
+
+```js
+import { Tab, Tabs } from '@youzan/zanui-vue';
+
+export default {
+  components: {
+    'zan-tab': Tab,
+    'zan-tabs': Tabs
+  }
+};
+```
+
+### 代码演示
+
+#### 基础用法
+
+默认情况下是启用第一个`tab`。
 
 :::demo 基础用法
 ```html
@@ -50,17 +101,36 @@ export default {
 ```
 :::
 
-### 禁用用法
+#### active特定tab
 
-:::demo 禁用用法
+可以在`zan-tabs`上设置`active`为对应`tab`的索引（从0开始，即0代表第一个）即可激活对应`tab`。
+
+:::demo 基础用法
 ```html
 <zan-tabs :active="active">
   <zan-tab title="选项一">内容一</zan-tab>
-  <zan-tab disable title="选项二" @disable="popalert">内容二</zan-tab>
+  <zan-tab title="选项二">内容二</zan-tab>
   <zan-tab title="选项三">内容三</zan-tab>
   <zan-tab title="选项四">内容四</zan-tab>
   <zan-tab title="选项五">内容五</zan-tab>
 </zan-tabs>
+```
+:::
+
+#### 禁用tab
+
+在对应的`zan-tab`上设置`disabled`属性即可，如果需要监听禁用事件，可以监听`disabled`事件。
+
+:::demo 禁用tab
+```html
+<zan-tabs>
+  <zan-tab title="选项一">内容一</zan-tab>
+  <zan-tab title="选项二" disabled @disabled="popalert">内容二</zan-tab>
+  <zan-tab title="选项三">内容三</zan-tab>
+  <zan-tab title="选项四">内容四</zan-tab>
+  <zan-tab title="选项五">内容五</zan-tab>
+</zan-tabs>
+
 <script>
 export default {
   methods: {
@@ -73,9 +143,11 @@ export default {
 ```
 :::
 
-### card样式用法
+#### card样式
 
-:::demo card样式用法
+`Tabs`目前有两种样式：`line`和`card`，默认为`line`样式，也就上面基础用法中的样式，你可以在`zan-tabs`上设置`type`为`card`改为card样式。
+
+:::demo card样式
 ```html
 <zan-tabs type="card">
   <zan-tab title="选项一">内容一</zan-tab>
@@ -87,18 +159,12 @@ export default {
 ```
 :::
 <style>
-  .page-tab {
+  .custom-tabwrap .zan-tab-active {
-    padding: 0 15px;
-  }
-  .custom-tabwrap .zan-tab-active{
     color: #20a0ff;
   }
-  .custom-tabwrap .zan-tabs-nav-bar{
+  .custom-tabwrap .zan-tabs-nav-bar {
     background: #20a0ff;
   }
-  .custom-tab {
-    font-weight: bold;
-  }
   .custom-pane {
     text-align: center;
     height: 50px;
@@ -106,30 +172,27 @@ export default {
   }
 </style>
 
-### 自定义样式用法
+#### 自定义样式
 
-:::demo 自定义样式用法
+可以在`zan-tabs`上设置对应的`class`，从而自定义某些样式。
+
+:::demo 自定义样式
 ```html
-<zan-tabs active="2" navclass="custom-tabwrap">
+<zan-tabs active="2" class="custom-tabwrap">
     <zan-tab title="选项一" class="custom-pane">内容一</zan-tab>
     <zan-tab title="选项二" class="custom-pane">内容二</zan-tab>
     <zan-tab title="选项三" class="custom-pane">内容三</zan-tab>
     <zan-tab title="选项四" class="custom-pane">内容四</zan-tab>
     <zan-tab title="选项五" class="custom-pane">内容五</zan-tab>
 </zan-tabs>
+
 <style>
-  .page-tab {
+  .custom-tabwrap .zan-tab-active {
-    padding: 0 15px;
-  }
-  .custom-tabwrap .zan-tab-active{
     color: #20a0ff;
   }
-  .custom-tabwrap .zan-tabs-nav-bar{
+  .custom-tabwrap .zan-tabs-nav-bar {
     background: #20a0ff;
   }
-  .custom-tab {
-    font-weight: bold;
-  }
   .custom-pane {
     text-align: center;
     height: 50px;
@@ -139,7 +202,7 @@ export default {
 ```
 :::
 
-### click事件
+#### click事件
 
 可以在`zan-tabs`上绑定一个`click`事件，事件处理函数有一个参数，参数为对应`tab`在`tabs`中的索引。
 
@@ -179,5 +242,12 @@ export default {
 | 参数       | 说明      | 类型       | 默认值       | 可选       |
 |-----------|-----------|-----------|-------------|-------------|
 | title | tab的标题 | `string`  |         |          |
-| disable | 是否禁用这个tab | `boolean`  | `false`      |           |
+| disabled | 是否禁用这个tab | `boolean`  | `false`      |           |
+
+### zan-tabs Event
+
+| 事件名       | 说明      | 参数       |
+|-----------|-----------|-----------|
+| click | 某个tab点击事件 | index：点击的`tab`的索引 |
+| disabled | 某个tab禁用时点击事件 | index：点击的`tab`的索引 |
 

packages/tab/src/tab.vue

@@ -13,15 +13,15 @@
         type: String,
         required: true
       },
-      disable: Boolean
+      disabled: Boolean
+    },
+    beforeCreate() {
+      this.$parent.tabs.push(this);
     },
     computed: {
       classNames() {
-        return { 'zan-tab__pane--select': this.$parent.tabs.indexOf(this) === this.$parent.switchActiveTabKey };
+        return { 'zan-tab__pane--select': this.$parent.tabs.indexOf(this) === this.$parent.curActive };
       }
-    },
-    created() {
-      this.$parent.tabs.push(this);
     }
   };
 </script>

packages/tab/src/tabs.vue

@@ -1,18 +1,23 @@
 <template>
-  <div class="zan-tabs">
+  <div class="zan-tabs" :class="[`zan-tabs--${type}`]">
-    <div class="zan-tabs__nav" :class="classNames">
+    <div
-      <div class="zan-tabs__nav-bar" :style="navBarStyle"></div>
+      class="zan-tabs__nav"
+      :class="[`zan-tabs__nav--${this.type}`, `zan-tabs--col-${this.tabs.length}`]"
+    >
+      <div class="zan-tabs__nav-bar" :style="navBarStyle" v-if="type === 'line'"></div>
       <div
         v-for="(tab, index) in tabs"
         class="zan-tab"
-        :class="{'zan-tab--active': index == switchActiveTabKey}"
+        :class="{'zan-tab--active': index === curActive}"
         ref="tabkey"
         @click="handleTabClick(index, tab)"
       >
         {{ tab.title }}
       </div>
     </div>
-    <div class="zan-tabs__content"><slot></slot></div>
+    <div class="zan-tabs__content">
+      <slot></slot>
+    </div>
   </div>
 </template>
 
@@ -30,11 +35,6 @@
       type: {
         type: String,
         default: 'line'
-      },
-      // nav的wrap的样式
-      navclass: {
-        type: String,
-        default: ''
       }
     },
 
@@ -42,27 +42,28 @@
       return {
         tabs: [],
         isReady: false,
-        switchActiveTabKey: +this.active
+        curActive: +this.active
       };
     },
 
     watch: {
       active(val) {
-        this.switchActiveTabKey = +val;
+        this.curActive = +val;
       }
     },
 
     computed: {
-      classNames() {
+      /**
-        return [`zan-tabs__nav--${this.type}`, `zan-tabs--col-${this.tabs.length}`, this.navclass];
+       * `type`为`line`时，tab下方的横线的样式
-      },
+       */
-
       navBarStyle() {
-        if (!this.isReady) return;
+        if (!this.isReady || type !== 'line') return;
-        const tabKey = this.switchActiveTabKey;
+
+        const tabKey = this.curActive;
         const elem = this.$refs.tabkey[tabKey];
         const offsetWidth = `${elem.offsetWidth || 0}px`;
         const offsetLeft = `${elem.offsetLeft || 0}px`;
+
         return {
           width: offsetWidth,
           transform: `translate3d(${offsetLeft}, 0px, 0px)`
@@ -71,13 +72,20 @@
     },
 
     methods: {
+      /**
+       * tab点击事件
+       *
+       * @param {number} index tab在tabs中的索引
+       * @param {Object} el tab的vue实例
+       */
       handleTabClick(index, el) {
-        if (el.disable) {
+        if (el.disabled) {
-          el.$emit('disable');
+          el.$emit('disabled', index);
           return;
         }
+
         this.$emit('click', index);
-        this.switchActiveTabKey = index;
+        this.curActive = index;
       }
     },
 

packages/zanui-css/scripts/build.sh

@@ -14,7 +14,7 @@ command_exists () {
 
 fontname() {
   if command_exists superman ; then
-    echo "//b.yzcdn.cn$server_prefix/$(basename $basepath/../build/font/zanui-icon-*.$1)"
+    echo "https://b.yzcdn.cn$server_prefix/$(basename $basepath/../build/font/zanui-icon-*.$1)"
   else
     echo "$(abspath $basepath/../build/font/zanui-icon-*.$1)"
   fi

packages/zanui-css/src/tab.css

@@ -53,9 +53,7 @@
         border-radius: 2px;
         border: 1px solid #666666;
         overflow: hidden;
-        .zan-tabs__nav-bar {
+
-          display: none;
-        }
         .zan-tab {
           color: #666666;
           line-height: 28px;