From ebd69714a1f89d6603581dc3530e8f2c0986c9f5 Mon Sep 17 00:00:00 2001 From: neverland Date: Sat, 14 Dec 2019 22:37:25 +0800 Subject: [PATCH 1/2] feat(Tab): add dot prop (#5272) --- .../test/__snapshots__/index.spec.js.snap | 12 +-- src/tab/README.zh-CN.md | 1 + src/tab/index.js | 1 + src/tab/test/__snapshots__/demo.spec.js.snap | 78 +++++++++--------- src/tab/test/__snapshots__/index.spec.js.snap | 80 +++++++++++-------- src/tab/test/index.spec.js | 12 +++ src/tabs/Title.js | 20 +++-- src/tabs/index.js | 1 + src/tabs/index.less | 8 +- 9 files changed, 125 insertions(+), 88 deletions(-) diff --git a/src/coupon-list/test/__snapshots__/index.spec.js.snap b/src/coupon-list/test/__snapshots__/index.spec.js.snap index bf0b303ee..c36470abd 100644 --- a/src/coupon-list/test/__snapshots__/index.spec.js.snap +++ b/src/coupon-list/test/__snapshots__/index.spec.js.snap @@ -12,8 +12,8 @@ exports[`empty-image prop 1`] = `
- - + +
@@ -61,8 +61,8 @@ exports[`render coupon list 1`] = `
- - + +
@@ -206,8 +206,8 @@ exports[`render empty coupon list 1`] = `
- - + +
diff --git a/src/tab/README.zh-CN.md b/src/tab/README.zh-CN.md index 24b1970c2..2dd193dcd 100644 --- a/src/tab/README.zh-CN.md +++ b/src/tab/README.zh-CN.md @@ -206,6 +206,7 @@ export default { | title | 标题 | *string* | - | - | | title-style | 自定义标题样式 | *any* | - | 2.2.14 | | disabled | 是否禁用标签 | *boolean* | `false` | - | +| dot | 是否在标题右上角显示小红点 | *boolean* | `false` | 2.3.0 | | url | 点击后跳转的链接地址 | *string* | - | 2.2.1 | | to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - | 2.2.1 | | replace | 是否在跳转时替换当前页面历史 | *boolean* | `false` | 2.2.1 | diff --git a/src/tab/index.js b/src/tab/index.js index 94426e12a..cec139c7e 100644 --- a/src/tab/index.js +++ b/src/tab/index.js @@ -9,6 +9,7 @@ export default createComponent({ props: { ...routeProps, + dot: Boolean, name: [Number, String], title: String, titleStyle: null, diff --git a/src/tab/test/__snapshots__/demo.spec.js.snap b/src/tab/test/__snapshots__/demo.spec.js.snap index 00cf78c7b..8247d22c4 100644 --- a/src/tab/test/__snapshots__/demo.spec.js.snap +++ b/src/tab/test/__snapshots__/demo.spec.js.snap @@ -6,10 +6,10 @@ exports[`renders demo correctly 1`] = `
- - - - + + + +
@@ -33,9 +33,9 @@ exports[`renders demo correctly 1`] = `
- - - + + +
@@ -56,14 +56,14 @@ exports[`renders demo correctly 1`] = `
- - - - - - - - + + + + + + + +
@@ -99,9 +99,9 @@ exports[`renders demo correctly 1`] = `
- - - + + +
@@ -122,9 +122,9 @@ exports[`renders demo correctly 1`] = `
- - - + + +
@@ -144,8 +144,8 @@ exports[`renders demo correctly 1`] = `
- - + +
@@ -165,10 +165,10 @@ exports[`renders demo correctly 1`] = `
- - - - + + + +
@@ -194,10 +194,10 @@ exports[`renders demo correctly 1`] = `
- - + +
@@ -215,10 +215,10 @@ exports[`renders demo correctly 1`] = `
- - - - + + + +
@@ -252,10 +252,10 @@ exports[`renders demo correctly 1`] = `
- - - - + + + +
diff --git a/src/tab/test/__snapshots__/index.spec.js.snap b/src/tab/test/__snapshots__/index.spec.js.snap index 6e0cf5069..541a9ff34 100644 --- a/src/tab/test/__snapshots__/index.spec.js.snap +++ b/src/tab/test/__snapshots__/index.spec.js.snap @@ -17,9 +17,9 @@ exports[`change tabs data 1`] = `
- - - + + +
@@ -41,9 +41,9 @@ exports[`change tabs data 2`] = `
- - - + + +
@@ -62,9 +62,9 @@ exports[`click to switch tab 1`] = `
- - - + + +
@@ -84,9 +84,9 @@ exports[`click to switch tab 2`] = `
- - - + + +
@@ -100,15 +100,29 @@ exports[`click to switch tab 2`] = `
`; +exports[`dot prop 1`] = ` +
+
+
+ +
+
+
+
+
Text
+
+
+`; + exports[`lazy render 1`] = `
- - - + + +
@@ -132,9 +146,9 @@ exports[`lazy render 2`] = `
- - - + + +
@@ -152,9 +166,9 @@ exports[`name prop 1`] = `
- - - + + +
@@ -175,9 +189,9 @@ exports[`render nav-left & nav-right slot 1`] = `
-
Nav Left - - +
Nav Left + +
Nav Right
@@ -199,9 +213,9 @@ exports[`swipe to switch tab 1`] = `
- - - + + +
@@ -221,9 +235,9 @@ exports[`swipe to switch tab 2`] = `
- - - + + +
@@ -241,9 +255,9 @@ exports[`swipe to switch tab 3`] = `
- - - + + +
diff --git a/src/tab/test/index.spec.js b/src/tab/test/index.spec.js index 55f8f408c..7d469f133 100644 --- a/src/tab/test/index.spec.js +++ b/src/tab/test/index.spec.js @@ -239,3 +239,15 @@ test('title-style prop', () => { expect(wrapper.find('.van-tab').element.style.color).toEqual('red'); }); + +test('dot prop', () => { + const wrapper = mount({ + template: ` + + Text + + ` + }); + + expect(wrapper).toMatchSnapshot(); +}); diff --git a/src/tabs/Title.js b/src/tabs/Title.js index 2b3576991..a06c2d280 100644 --- a/src/tabs/Title.js +++ b/src/tabs/Title.js @@ -1,9 +1,11 @@ import { createNamespace } from '../utils'; +import Info from '../info'; const [createComponent, bem] = createNamespace('tab'); export default createComponent({ props: { + dot: Boolean, type: String, color: String, title: String, @@ -59,16 +61,22 @@ export default createComponent({ ); diff --git a/src/tabs/index.js b/src/tabs/index.js index 058c6b470..867af7208 100644 --- a/src/tabs/index.js +++ b/src/tabs/index.js @@ -268,6 +268,7 @@ export default createComponent({ Date: Sun, 15 Dec 2019 22:06:24 +0800 Subject: [PATCH 2/2] feat(Tab): add info prop (#5274) --- src/grid/README.md | 2 +- src/tab/README.md | 2 ++ src/tab/README.zh-CN.md | 1 + src/tab/index.js | 1 + src/tab/test/__snapshots__/index.spec.js.snap | 14 ++++++++++++++ src/tab/test/index.spec.js | 12 ++++++++++++ src/tabs/Title.js | 3 ++- src/tabs/index.js | 3 ++- 8 files changed, 35 insertions(+), 3 deletions(-) diff --git a/src/grid/README.md b/src/grid/README.md index d19bc8d82..8a6c7d41c 100644 --- a/src/grid/README.md +++ b/src/grid/README.md @@ -116,7 +116,7 @@ Vue.use(Grid).use(GridItem); | text | Text | *string* | - | - | | icon | Icon name or URL | *string* | - | - | | dot | Whether to show red dot | *boolean* | `false` | 2.2.1 | -| info | Content of the badge | *string \| number* | `''` | 2.2.1 | +| info | Content of the badge | *string \| number* | - | 2.2.1 | | url | Link URL | *string* | - | - | | to | Target route of the link, same as to of vue-router | *string \| object* | - | - | | replace | If true, the navigation will not leave a history record | *boolean* | `false` | - | diff --git a/src/tab/README.md b/src/tab/README.md index 477c9078c..5748ec380 100644 --- a/src/tab/README.md +++ b/src/tab/README.md @@ -202,6 +202,8 @@ In swipeable mode, you can switch tabs with swipe gestrue in the content | title | Title | *string* | - | - | | title-style | Custom title style | *any* | - | 2.2.14 | | disabled | Whether to disable tab | *boolean* | `false` | - | +| dot | Whether to show red dot on the title | *boolean* | `false` | 2.3.0 | +| info | Content of the badge on the title | *string \| number* | - | 2.3.0 | | url | Link | *string* | - | 2.2.1 | | to | Target route of the link, same as to of vue-router | *string \| object* | - | 2.2.1 | | replace | If true, the navigation will not leave a history record | *boolean* | `false` | 2.2.1 | diff --git a/src/tab/README.zh-CN.md b/src/tab/README.zh-CN.md index 2dd193dcd..e316d1ef7 100644 --- a/src/tab/README.zh-CN.md +++ b/src/tab/README.zh-CN.md @@ -207,6 +207,7 @@ export default { | title-style | 自定义标题样式 | *any* | - | 2.2.14 | | disabled | 是否禁用标签 | *boolean* | `false` | - | | dot | 是否在标题右上角显示小红点 | *boolean* | `false` | 2.3.0 | +| info | 标题右上角徽标的内容 | *string \| number* | - | 2.3.0 | | url | 点击后跳转的链接地址 | *string* | - | 2.2.1 | | to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - | 2.2.1 | | replace | 是否在跳转时替换当前页面历史 | *boolean* | `false` | 2.2.1 | diff --git a/src/tab/index.js b/src/tab/index.js index cec139c7e..7ddc50834 100644 --- a/src/tab/index.js +++ b/src/tab/index.js @@ -10,6 +10,7 @@ export default createComponent({ props: { ...routeProps, dot: Boolean, + info: [Number, String], name: [Number, String], title: String, titleStyle: null, diff --git a/src/tab/test/__snapshots__/index.spec.js.snap b/src/tab/test/__snapshots__/index.spec.js.snap index 541a9ff34..67e3bbd97 100644 --- a/src/tab/test/__snapshots__/index.spec.js.snap +++ b/src/tab/test/__snapshots__/index.spec.js.snap @@ -114,6 +114,20 @@ exports[`dot prop 1`] = ` </div> `; +exports[`info prop 1`] = ` +<div class="van-tabs van-tabs--line"> + <div class="van-tabs__wrap van-hairline--top-bottom"> + <div role="tablist" class="van-tabs__nav van-tabs__nav--line"> + <div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text"><div class="van-info">10</div></span></div> + <div class="van-tabs__line"></div> + </div> + </div> + <div class="van-tabs__content"> + <div role="tabpanel" class="van-tab__pane">Text</div> + </div> +</div> +`; + exports[`lazy render 1`] = ` <div class="van-tabs van-tabs--line"> <div> diff --git a/src/tab/test/index.spec.js b/src/tab/test/index.spec.js index 7d469f133..02a66f49b 100644 --- a/src/tab/test/index.spec.js +++ b/src/tab/test/index.spec.js @@ -251,3 +251,15 @@ test('dot prop', () => { expect(wrapper).toMatchSnapshot(); }); + +test('info prop', () => { + const wrapper = mount({ + template: ` + <van-tabs> + <van-tab info="10">Text</van-tab> + </van-tabs> + ` + }); + + expect(wrapper).toMatchSnapshot(); +}); diff --git a/src/tabs/Title.js b/src/tabs/Title.js index a06c2d280..2f6043284 100644 --- a/src/tabs/Title.js +++ b/src/tabs/Title.js @@ -7,6 +7,7 @@ export default createComponent({ props: { dot: Boolean, type: String, + info: [Number, String], color: String, title: String, isActive: Boolean, @@ -76,7 +77,7 @@ export default createComponent({ > <span class={bem('text')}> {this.slots() || this.title} - <Info dot={this.dot} /> + <Info dot={this.dot} info={this.info} /> </span> </div> ); diff --git a/src/tabs/index.js b/src/tabs/index.js index 867af7208..1a5eac26e 100644 --- a/src/tabs/index.js +++ b/src/tabs/index.js @@ -268,8 +268,9 @@ export default createComponent({ <Title ref="titles" refInFor - dot={item.dot} type={type} + dot={item.dot} + info={item.info} title={item.title} color={this.color} style={item.titleStyle}