From 8ed6c73528e78f12d70210c6a205fd396e349223 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Fri, 23 Mar 2018 11:10:35 +0800
Subject: [PATCH] [Improvement] Tab: click event add title param (#761)

---
 README.md                             |  2 +-
 docs/demos/views/tab.vue              | 16 +++++++++-------
 docs/markdown/en-US/address-edit.md   |  2 +-
 docs/markdown/en-US/area.md           |  1 +
 docs/markdown/en-US/intro.md          |  4 ++--
 docs/markdown/en-US/password-input.md |  2 +-
 docs/markdown/en-US/picker.md         |  1 +
 docs/markdown/en-US/tab.md            | 23 ++++++++++-------------
 docs/markdown/zh-CN/area.md           |  1 +
 docs/markdown/zh-CN/picker.md         |  1 +
 docs/markdown/zh-CN/tab.md            | 22 +++++++++++-----------
 packages/tabs/index.vue               |  7 ++++---
 test/components/tabs.vue              | 13 ++-----------
 13 files changed, 45 insertions(+), 50 deletions(-)

diff --git a/README.md b/README.md
index 432b1779c..02c8feab6 100644
--- a/README.md
+++ b/README.md
@@ -83,7 +83,7 @@ Vue.use(Vant);
 <script src="https://unpkg.com/vant/lib/vant.min.js"></script>
 ```
 
-See more in [Quickstart](https://www.youzanyun.com/zanui/vant#/en-US/component/quickstart).
+See more in [Quickstart](https://www.youzanyun.com/zanui/vant#/en-US/quickstart).
 
 ## Contribution
 
diff --git a/docs/demos/views/tab.vue b/docs/demos/views/tab.vue
index 76aa8895f..82e5d4a38 100644
--- a/docs/demos/views/tab.vue
+++ b/docs/demos/views/tab.vue
@@ -33,7 +33,7 @@
     </demo-block>
 
     <demo-block :title="$t('title5')">
-      <van-tabs @click="handleTabClick">
+      <van-tabs @click="onClick">
         <van-tab v-for="index in 4" :title="$t('tab') + index" :key="index">
           {{ $t('content') }} {{ index }}
         </van-tab>
@@ -80,7 +80,8 @@ export default {
       title5: '点击事件',
       title6: '粘性布局',
       title7: '自定义标签',
-      title8: '滑动切换'
+      title8: '滑动切换',
+      disabled: ' 已被禁用'
     },
     'en-US': {
       tab: 'Tab ',
@@ -91,7 +92,8 @@ export default {
       title5: 'Click Event',
       title6: 'Sticky',
       title7: 'Custom Tab',
-      title8: 'Swipeable'
+      title8: 'Swipeable',
+      disabled: ' is disabled'
     }
   },
 
@@ -103,12 +105,12 @@ export default {
   },
 
   methods: {
-    onClickDisabled() {
-      Toast('Disabled!');
+    onClickDisabled(index, title) {
+      this.$toast(title + this.$t('disabled'));
     },
 
-    handleTabClick(index) {
-      Toast(index);
+    onClick(index, title) {
+      this.$toast(title);
     }
   }
 };
diff --git a/docs/markdown/en-US/address-edit.md b/docs/markdown/en-US/address-edit.md
index c38677855..4efb6bc49 100644
--- a/docs/markdown/en-US/address-edit.md
+++ b/docs/markdown/en-US/address-edit.md
@@ -109,4 +109,4 @@ export default {
 | address | Address | `String` |
 
 #### Area Data Structure
-Please refer to [Area](#/en-US/component/area) component。
+Please refer to [Area](#/en-US/area) component。
diff --git a/docs/markdown/en-US/area.md b/docs/markdown/en-US/area.md
index d0f5a635d..18f986695 100644
--- a/docs/markdown/en-US/area.md
+++ b/docs/markdown/en-US/area.md
@@ -1,4 +1,5 @@
 ## Area
+The Picker component is usually used with [Popup](#/en-US/popup) Component.
 
 ### Install
 
diff --git a/docs/markdown/en-US/intro.md b/docs/markdown/en-US/intro.md
index 3f44712f2..61dc0c197 100644
--- a/docs/markdown/en-US/intro.md
+++ b/docs/markdown/en-US/intro.md
@@ -16,7 +16,7 @@
 
 ### Quickstart
 
-See in [Quickstart](https://www.youzanyun.com/zanui/vant#/en-US/component/quickstart).
+See in [Quickstart](https://www.youzanyun.com/zanui/vant#/en-US/quickstart).
 
 ### Contribution
 
@@ -29,7 +29,7 @@ Modern browsers and Android 4.0+, iOS 6+.
 ### Links
 
 * [Feedback](https://github.com/youzan/vant/issues)
-* [Changelog](https://www.youzanyun.com/zanui/vant#/en-US/component/changelog)
+* [Changelog](https://www.youzanyun.com/zanui/vant#/en-US/changelog)
 * [Weapp UI](https://github.com/youzan/zanui-weapp)
 * [React UI](https://www.youzanyun.com/zanui/zent)
 * [Vant Demo](https://github.com/youzan/vant-demo)
diff --git a/docs/markdown/en-US/password-input.md b/docs/markdown/en-US/password-input.md
index 82833f3c9..11fb365af 100644
--- a/docs/markdown/en-US/password-input.md
+++ b/docs/markdown/en-US/password-input.md
@@ -1,5 +1,5 @@
 ## PasswordInput
-The PasswordInput component is usually used with [NumberKeyboard](#/en-US/component/number-keyboard) Component.
+The PasswordInput component is usually used with [NumberKeyboard](#/en-US/number-keyboard) Component.
 
 ### Install
 ``` javascript
diff --git a/docs/markdown/en-US/picker.md b/docs/markdown/en-US/picker.md
index bbe7ed490..a3d4db0ee 100644
--- a/docs/markdown/en-US/picker.md
+++ b/docs/markdown/en-US/picker.md
@@ -1,4 +1,5 @@
 ## Picker
+The Picker component is usually used with [Popup](#/en-US/popup) Component.
 
 ### Install
 ``` javascript
diff --git a/docs/markdown/en-US/tab.md b/docs/markdown/en-US/tab.md
index 8cdb54a83..64a8773fb 100644
--- a/docs/markdown/en-US/tab.md
+++ b/docs/markdown/en-US/tab.md
@@ -1,4 +1,4 @@
-## Tabs
+## Tab
 
 ### Install
 ``` javascript
@@ -58,8 +58,8 @@ You can set `disabled` attribute on the corresponding `van-tab`.
 ```javascript
 export default {
   methods: {
-    onClickDisabled() {
-      Toast('Disabled!');
+    onClickDisabled(index, title) {
+      this.$toast(title + ' is disabled');
     }
   }
 };
@@ -79,10 +79,8 @@ Tabs styled as cards.
 
 #### Click Event
 
-You can bind `click` event on `van-tabs`, the event handler function has one parameters: index of click tab.
-
 ```html
-<van-tabs @click="handleTabClick">
+<van-tabs @click="onClick">
   <van-tab v-for="index in 4" :title="'tab' + index">
     content of tab {{ index }}
   </van-tab>
@@ -92,8 +90,8 @@ You can bind `click` event on `van-tabs`, the event handler function has one par
 ```javascript
 export default {
   methods: {
-    handleTabClick(index) {
-      Toast(index);
+    onClick(index, title) {
+      this.$toast(title);
     }
   }
 };
@@ -151,8 +149,8 @@ In swipeable mode, you can switch tabs with swipe gestrue in the content
 
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
-| title | Tab title | `String` | - | - |
-| disabled | Whether disabled current tab | `Boolean` | `false` | - |
+| title | Title | `String` | - | - |
+| disabled | Whether to disable tab | `Boolean` | `false` | - |
 
 ### Tab Slot
 
@@ -165,6 +163,5 @@ In swipeable mode, you can switch tabs with swipe gestrue in the content
 
 | Event | Description | Arguments |
 |-----------|-----------|-----------|
-| click | Triggered when click tab | index：index of current tab |
-| disabled | Triggered when click disabled tab | index：index of current tab |
-
+| click | Triggered when click tab | index：index of current tab，title: tab title |
+| disabled | Triggered when click disabled tab | index：index of current tab, title: tab title |
diff --git a/docs/markdown/zh-CN/area.md b/docs/markdown/zh-CN/area.md
index ae2043ef0..f91649690 100644
--- a/docs/markdown/zh-CN/area.md
+++ b/docs/markdown/zh-CN/area.md
@@ -1,4 +1,5 @@
 ## Area 省市县选择组件
+省市县选择组件通常与 [弹出层](#/zh-CN/popup) 组件配合使用
 
 ### 使用指南
 
diff --git a/docs/markdown/zh-CN/picker.md b/docs/markdown/zh-CN/picker.md
index 2659bc869..6b78b425f 100644
--- a/docs/markdown/zh-CN/picker.md
+++ b/docs/markdown/zh-CN/picker.md
@@ -1,4 +1,5 @@
 ## Picker 选择器
+选择器组件通常与 [弹出层](#/zh-CN/popup) 组件配合使用
 
 ### 使用指南
 ``` javascript
diff --git a/docs/markdown/zh-CN/tab.md b/docs/markdown/zh-CN/tab.md
index c234922cc..63c999b39 100644
--- a/docs/markdown/zh-CN/tab.md
+++ b/docs/markdown/zh-CN/tab.md
@@ -1,4 +1,4 @@
-## Tabs 标签页
+## Tab 标签页
 
 ### 使用指南
 ``` javascript
@@ -58,8 +58,8 @@ export default {
 ```javascript
 export default {
   methods: {
-    onClickDisabled() {
-      Toast('Disabled!')
+    onClickDisabled(index, title) {
+      this.$toast(title + '已被禁用');
     }
   }
 };
@@ -79,10 +79,10 @@ export default {
 
 #### 点击事件
 
-可以在`van-tabs`上绑定一个`click`事件，事件处理函数有一个参数，参数为对应`tab`在`tabs`中的索引。
+可以在`van-tabs`上绑定`click`事件，事件传参为标签对应的索引和标题
 
 ```html
-<van-tabs @click="handleTabClick">
+<van-tabs @click="onClick">
   <van-tab v-for="index in 4" :title="'选项 ' + index">
     内容 {{ index }}
   </van-tab>
@@ -92,8 +92,8 @@ export default {
 ```javascript
 export default {
   methods: {
-    handleTabClick(index) {
-      Toast(index);
+    onClick(index, title) {
+      this.$toast(title);
     }
   }
 };
@@ -151,8 +151,8 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 | 可选 |
 |-----------|-----------|-----------|-------------|-------------|
-| title | tab的标题 | `String` | - | - |
-| disabled | 是否禁用这个tab | `Boolean` | `false` | - |
+| title | 标题 | `String` | - | - |
+| disabled | 是否禁用标签 | `Boolean` | `false` | - |
 
 ### Tab Slot
 
@@ -165,6 +165,6 @@ export default {
 
 | 事件名 | 说明 | 参数 |
 |-----------|-----------|-----------|
-| click | 某个tab点击事件 | index：点击的`tab`的索引 |
-| disabled | 某个tab禁用时点击事件 | index：点击的`tab`的索引 |
+| click | 点击标签时触发 | index：标签索引，title：标题 |
+| disabled | 点击被禁用的标签时触发 | index：标签索引，title：标题 |
 
diff --git a/packages/tabs/index.vue b/packages/tabs/index.vue
index 6da2f8702..827b76524 100644
--- a/packages/tabs/index.vue
+++ b/packages/tabs/index.vue
@@ -229,10 +229,11 @@ export default create({
 
     // emit event when clicked
     onClick(index) {
-      if (this.tabs[index].disabled) {
-        this.$emit('disabled', index);
+      const { title, disabled } = this.tabs[index];
+      if (disabled) {
+        this.$emit('disabled', index, title);
       } else {
-        this.$emit('click', index);
+        this.$emit('click', index, title);
         this.curActive = index;
       }
     },
diff --git a/test/components/tabs.vue b/test/components/tabs.vue
index 71486b498..f037807bf 100644
--- a/test/components/tabs.vue
+++ b/test/components/tabs.vue
@@ -4,8 +4,8 @@
     :duration="duration"
     :sticky="sticky"
     :swipeable="swipeable"
-    @click="handleTabClick"
-    @disabled="handleTabDisabledClick"
+    @click="$emit('click')"
+    @disabled="$emit('disabled')"
   >
     <van-tab :title="firstTabTitle" :disabled="firstTabDisabled">内容一</van-tab>
     <van-tab title="选项二">内容二</van-tab>
@@ -33,15 +33,6 @@ export default {
       active: 0,
       duration: 0.5
     };
-  },
-
-  methods: {
-    handleTabClick(index) {
-      this.$emit('click');
-    },
-    handleTabDisabledClick(index) {
-      this.$emit('disabled');
-    }
   }
 };
 </script>