[Improvement] Tab: click event add title param (#761)

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
 

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() {
+    onClickDisabled(index, title) {
-      Toast('Disabled!');
+      this.$toast(title + this.$t('disabled'));
     },
 
-    handleTabClick(index) {
+    onClick(index, title) {
-      Toast(index);
+      this.$toast(title);
     }
   }
 };

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。

docs/markdown/en-US/area.md

@@ -1,4 +1,5 @@
 ## Area
+The Picker component is usually used with [Popup](#/en-US/popup) Component.
 
 ### Install
 

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)

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

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

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() {
+    onClickDisabled(index, title) {
-      Toast('Disabled!');
+      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) {
+    onClick(index, title) {
-      Toast(index);
+      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` | - | - |
+| title | Title | `String` | - | - |
-| disabled | Whether disabled current tab | `Boolean` | `false` | - |
+| 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 |
+| click | Triggered when click tab | index：index of current tab，title: tab title |
-| disabled | Triggered when click disabled tab | index：index of current tab |
+| disabled | Triggered when click disabled tab | index：index of current tab, title: tab title |
-

docs/markdown/zh-CN/area.md

@@ -1,4 +1,5 @@
 ## Area 省市县选择组件
+省市县选择组件通常与 [弹出层](#/zh-CN/popup) 组件配合使用
 
 ### 使用指南
 

docs/markdown/zh-CN/picker.md

@@ -1,4 +1,5 @@
 ## Picker 选择器
+选择器组件通常与 [弹出层](#/zh-CN/popup) 组件配合使用
 
 ### 使用指南
 ``` javascript

docs/markdown/zh-CN/tab.md

@@ -1,4 +1,4 @@
-## Tabs 标签页
+## Tab 标签页
 
 ### 使用指南
 ``` javascript
@@ -58,8 +58,8 @@ export default {
 ```javascript
 export default {
   methods: {
-    onClickDisabled() {
+    onClickDisabled(index, title) {
-      Toast('Disabled!')
+      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) {
+    onClick(index, title) {
-      Toast(index);
+      this.$toast(title);
     }
   }
 };
@@ -151,8 +151,8 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 | 可选 |
 |-----------|-----------|-----------|-------------|-------------|
-| title | tab的标题 | `String` | - | - |
+| title | 标题 | `String` | - | - |
-| disabled | 是否禁用这个tab | `Boolean` | `false` | - |
+| disabled | 是否禁用标签 | `Boolean` | `false` | - |
 
 ### Tab Slot
 
@@ -165,6 +165,6 @@ export default {
 
 | 事件名 | 说明 | 参数 |
 |-----------|-----------|-----------|
-| click | 某个tab点击事件 | index：点击的`tab`的索引 |
+| click | 点击标签时触发 | index：标签索引，title：标题 |
-| disabled | 某个tab禁用时点击事件 | index：点击的`tab`的索引 |
+| disabled | 点击被禁用的标签时触发 | index：标签索引，title：标题 |
 

packages/tabs/index.vue

@@ -229,10 +229,11 @@ export default create({
 
     // emit event when clicked
     onClick(index) {
-      if (this.tabs[index].disabled) {
+      const { title, disabled } = this.tabs[index];
-        this.$emit('disabled', index);
+      if (disabled) {
+        this.$emit('disabled', index, title);
       } else {
-        this.$emit('click', index);
+        this.$emit('click', index, title);
         this.curActive = index;
       }
     },

test/components/tabs.vue

@@ -4,8 +4,8 @@
     :duration="duration"
     :sticky="sticky"
     :swipeable="swipeable"
-    @click="handleTabClick"
+    @click="$emit('click')"
-    @disabled="handleTabDisabledClick"
+    @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>