From b802047e24e8c23db173cc642fadb4a291d83b7b Mon Sep 17 00:00:00 2001 From: neverland Date: Fri, 5 Jul 2019 14:14:20 +0800 Subject: [PATCH] [new feature] Tab: add name prop (#3762) --- src/tab/README.md | 33 ++++++-- src/tab/README.zh-CN.md | 43 ++++++++--- src/tab/demo/index.vue | 38 ++++++++-- src/tab/index.js | 21 +++-- src/tab/test/__snapshots__/demo.spec.js.snap | 23 ++++++ src/tab/test/__snapshots__/index.spec.js.snap | 22 ++++++ src/tab/test/index.spec.js | 35 +++++++++ src/tabbar/README.md | 2 +- src/tabbar/demo/index.vue | 6 +- src/tabs/Content.js | 16 ++-- src/tabs/Title.js | 12 +-- src/tabs/index.js | 76 ++++++++++--------- 12 files changed, 243 insertions(+), 84 deletions(-) diff --git a/src/tab/README.md b/src/tab/README.md index 3ed7adec264..153c93dd4a1 100644 --- a/src/tab/README.md +++ b/src/tab/README.md @@ -32,6 +32,26 @@ export default { } ``` +### Match By Name + +```html + + content of tab 1 + content of tab 2 + content of tab 3 + +``` + +```js +export default { + data() { + return { + activeName: 'a' + }; + } +} +``` + ### Swipe Tabs By default more than 4 tabs, you can scroll through the tabs. You can set `swipe-threshold` attribute to customize threshold number. @@ -59,7 +79,7 @@ You can set `disabled` attribute on the corresponding `van-tab`. ```javascript export default { methods: { - onClickDisabled(index, title) { + onClickDisabled(name, title) { this.$toast(title + ' is disabled'); } } @@ -91,7 +111,7 @@ Tabs styled as cards. ```javascript export default { methods: { - onClick(index, title) { + onClick(name, title) { this.$toast(title); } } @@ -155,7 +175,7 @@ In swipeable mode, you can switch tabs with swipe gestrue in the content | Attribute | Description | Type | Default | |------|------|------|------| -| v-model | Index of active tab | `String` `Number` | `0` | +| v-model | Index of active tab | `String | Number` | `0` | | type | Can be set to `line` `card` | `String` | `line` | | duration | Toggle tab's animation time | `Number` | `0.3` | - | | background | Background color | `String` | `white` | @@ -177,6 +197,7 @@ In swipeable mode, you can switch tabs with swipe gestrue in the content | Attribute | Description | Type | Default | |------|------|------|------| +| name | Identifier | `String | Number` | Index of tab | | title | Title | `String` | - | | disabled | Whether to disable tab | `Boolean` | `false` | @@ -198,7 +219,7 @@ 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，title: tab title | -| change | Triggered when active tab changed | index：index of current tab，title: tab title | -| disabled | Triggered when click disabled tab | index：index of current tab, title: tab title | +| click | Triggered when click tab | name：name of current tab，title: tab title | +| change | Triggered when active tab changed | name：name of current tab，title: tab title | +| disabled | Triggered when click disabled tab | name：name of current tab, title: tab title | | scroll | Triggered when tab scroll in sticky mode | Object: { scrollTop, isFixed } | diff --git a/src/tab/README.zh-CN.md b/src/tab/README.zh-CN.md index ffa776af127..e84980e5062 100644 --- a/src/tab/README.zh-CN.md +++ b/src/tab/README.zh-CN.md @@ -12,7 +12,7 @@ Vue.use(Tab).use(Tabs); ### 基础用法 -默认情况下启用第一个标签，可以通过`v-model`绑定当前激活的标签索引 +通过`v-model`绑定当前激活标签对应的索引值，默认情况下启用第一个标签 ```html @@ -33,9 +33,31 @@ export default { } ``` -### 横向滚动 +### 通过名称匹配 -多于 4 个标签时，Tab 可以横向滚动 +在标签指定`name`属性的情况下，`v-model`的值为当前标签的`name` + +```html + + 内容 1 + 内容 2 + 内容 3 + +``` + +```js +export default { + data() { + return { + activeName: 'a' + }; + } +} +``` + +### 标签栏滚动 + +标签数量超过 4 个时，标签栏可以在水平方向上滚动，切换时会自动将当前标签居中 ```html @@ -60,8 +82,8 @@ export default { ```javascript export default { methods: { - onClickDisabled(index, title) { - this.$toast(title + '已被禁用'); + onClickDisabled(name, title) { + this.$toast(name + '已被禁用'); } } }; @@ -93,7 +115,7 @@ export default { ```javascript export default { methods: { - onClick(index, title) { + onClick(name, title) { this.$toast(title); } } @@ -157,7 +179,7 @@ export default { | 参数 | 说明 | 类型 | 默认值 | 版本 | |------|------|------|------|------| -| v-model | 当前标签的索引 | `String` `Number` | `0` | - | +| v-model | 绑定当前选中标签的标识符 | `String | Number` | `0` | - | | type | 样式类型，可选值为`card` | `String` | `line` | - | | duration | 动画时间，单位秒 | `Number` | `0.3` | - | | background | 标签栏背景色 | `String` | `white` | 1.6.5 | @@ -179,6 +201,7 @@ export default { | 参数 | 说明 | 类型 | 默认值 | 版本 | |------|------|------|------|------| +| name | 标签名称，作为匹配的标识符 | `String | Number` | 标签的索引值 | 2.0.6 | | title | 标题 | `String` | - | - | | disabled | 是否禁用标签 | `Boolean` | `false` | - | @@ -200,7 +223,7 @@ export default { | 事件名 | 说明 | 回调参数 | |------|------|------| -| click | 点击标签时触发 | index：标签索引，title：标题 | -| change | 当前激活的标签改变时触发 | index：标签索引，title：标题 | -| disabled | 点击被禁用的标签时触发 | index：标签索引，title：标题 | +| click | 点击标签时触发 | name：标签标识符，title：标题 | +| change | 当前激活的标签改变时触发 | name：标签标识符，title：标题 | +| disabled | 点击被禁用的标签时触发 | name：标签标识符，title：标题 | | scroll | 滚动时触发，仅在 sticky 模式下生效 | { scrollTop: 距离顶部位置, isFixed: 是否吸顶 } | diff --git a/src/tab/demo/index.vue b/src/tab/demo/index.vue index 6fef6308007..6169bdb88e3 100644 --- a/src/tab/demo/index.vue +++ b/src/tab/demo/index.vue @@ -12,8 +12,31 @@ + + + + {{ $t('content') }} 1 + + + {{ $t('content') }} 2 + + + {{ $t('content') }} 3 + + + + - +
{Content}
@@ -62,7 +67,7 @@ export default createComponent({ } return ( -
+
{Content}
); diff --git a/src/tab/test/__snapshots__/demo.spec.js.snap b/src/tab/test/__snapshots__/demo.spec.js.snap index 4a3c1df6e7d..c670497a2ec 100644 --- a/src/tab/test/__snapshots__/demo.spec.js.snap +++ b/src/tab/test/__snapshots__/demo.spec.js.snap @@ -29,6 +29,29 @@ exports[`renders demo correctly 1`] = `
+
+
+
+
+ + + +
+
+
+
+ +
+ 内容 2 +
+ +
+
+
diff --git a/src/tab/test/__snapshots__/index.spec.js.snap b/src/tab/test/__snapshots__/index.spec.js.snap index b3f0cb330c1..8cabc463f9d 100644 --- a/src/tab/test/__snapshots__/index.spec.js.snap +++ b/src/tab/test/__snapshots__/index.spec.js.snap @@ -136,6 +136,28 @@ exports[`lazy render 2`] = `
`; +exports[`name prop 1`] = ` +
+
+
+ + + +
+
+
+
+
Text
+ + +
+
+`; + exports[`render nav-left & nav-right slot 1`] = `
diff --git a/src/tab/test/index.spec.js b/src/tab/test/index.spec.js index d72138a6926..874d64be27f 100644 --- a/src/tab/test/index.spec.js +++ b/src/tab/test/index.spec.js @@ -145,3 +145,38 @@ test('border props', async () => { expect(wrapper).toMatchSnapshot(); }); + +test('name prop', async () => { + const onClick = jest.fn(); + const onChange = jest.fn(); + const onDisabled = jest.fn(); + + const wrapper = mount({ + template: ` + + Text + Text + Text + + `, + methods: { + onClick, + onChange, + onDisabled + } + }); + + await later(); + expect(wrapper).toMatchSnapshot(); + + const tabs = wrapper.findAll('.van-tab'); + tabs.at(1).trigger('click'); + + expect(onClick).toHaveBeenCalledWith('b', 'title2'); + expect(onChange).toHaveBeenCalledWith('b', 'title2'); + expect(onChange).toHaveBeenCalledTimes(1); + + tabs.at(2).trigger('click'); + expect(onDisabled).toHaveBeenCalledWith('c', 'title3'); + expect(onChange).toHaveBeenCalledTimes(1); +}); diff --git a/src/tabbar/README.md b/src/tabbar/README.md index 679ce9eaa6b..a603cca9bdf 100644 --- a/src/tabbar/README.md +++ b/src/tabbar/README.md @@ -31,7 +31,7 @@ export default { } ``` -### Item Name +### Match by name ```html diff --git a/src/tabbar/demo/index.vue b/src/tabbar/demo/index.vue index 80f16ae07b2..249f4343187 100644 --- a/src/tabbar/demo/index.vue +++ b/src/tabbar/demo/index.vue @@ -9,7 +9,7 @@ - + = MIN_SWIPE_DISTANCE) { /* istanbul ignore else */ - if (deltaX > 0 && active !== 0) { - this.$emit('change', active - 1); - } else if (deltaX < 0 && active !== this.count - 1) { - this.$emit('change', active + 1); + if (deltaX > 0 && currentIndex !== 0) { + this.$emit('change', currentIndex - 1); + } else if (deltaX < 0 && currentIndex !== this.count - 1) { + this.$emit('change', currentIndex + 1); } } }, diff --git a/src/tabs/Title.js b/src/tabs/Title.js index cbafd0f867b..4a26952b2f5 100644 --- a/src/tabs/Title.js +++ b/src/tabs/Title.js @@ -7,7 +7,7 @@ export default { type: String, color: String, title: String, - active: Boolean, + isActive: Boolean, ellipsis: Boolean, disabled: Boolean, scrollable: Boolean, @@ -19,7 +19,7 @@ export default { computed: { style() { const style = {}; - const { color, active } = this; + const { color, isActive } = this; const isCard = this.type === 'card'; // card theme color @@ -27,7 +27,7 @@ export default { style.borderColor = color; if (!this.disabled) { - if (active) { + if (isActive) { style.backgroundColor = color; } else { style.color = color; @@ -35,7 +35,7 @@ export default { } } - const titleColor = active ? this.activeColor : this.inactiveColor; + const titleColor = isActive ? this.activeColor : this.inactiveColor; if (titleColor) { style.color = titleColor; } @@ -64,9 +64,9 @@ export default { return ( {this.slots()}