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); ``` -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 @@ - + {{ $t('content') }} {{ index }} @@ -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 - + content of tab {{ index }} @@ -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 - + 内容 {{ index }} @@ -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')" > 内容一 内容二 @@ -33,15 +33,6 @@ export default { active: 0, duration: 0.5 }; - }, - - methods: { - handleTabClick(index) { - this.$emit('click'); - }, - handleTabDisabledClick(index) { - this.$emit('disabled'); - } } };