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/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 24b1970c2..e316d1ef7 100644 --- a/src/tab/README.zh-CN.md +++ b/src/tab/README.zh-CN.md @@ -206,6 +206,8 @@ export default { | title | 标题 | *string* | - | - | | 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 94426e12a..7ddc50834 100644 --- a/src/tab/index.js +++ b/src/tab/index.js @@ -9,6 +9,8 @@ export default createComponent({ props: { ...routeProps, + dot: Boolean, + info: [Number, String], 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..67e3bbd97 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,43 @@ exports[`click to switch tab 2`] = `
`; +exports[`dot prop 1`] = ` +
+
+
+ +
+
+
+
+
Text
+
+
+`; + +exports[`info prop 1`] = ` +
+
+
+ +
+
+
+
+
Text
+
+
+`; + exports[`lazy render 1`] = `
- - - + + +
@@ -132,9 +160,9 @@ exports[`lazy render 2`] = `
- - - + + +
@@ -152,9 +180,9 @@ exports[`name prop 1`] = `
- - - + + +
@@ -175,9 +203,9 @@ exports[`render nav-left & nav-right slot 1`] = `
-
Nav Left - - +
Nav Left + +
Nav Right
@@ -199,9 +227,9 @@ exports[`swipe to switch tab 1`] = `
- - - + + +
@@ -221,9 +249,9 @@ exports[`swipe to switch tab 2`] = `
- - - + + +
@@ -241,9 +269,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..02a66f49b 100644 --- a/src/tab/test/index.spec.js +++ b/src/tab/test/index.spec.js @@ -239,3 +239,27 @@ 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(); +}); + +test('info prop', () => { + const wrapper = mount({ + template: ` + + Text + + ` + }); + + expect(wrapper).toMatchSnapshot(); +}); diff --git a/src/tabs/Title.js b/src/tabs/Title.js index 2b3576991..2f6043284 100644 --- a/src/tabs/Title.js +++ b/src/tabs/Title.js @@ -1,10 +1,13 @@ import { createNamespace } from '../utils'; +import Info from '../info'; const [createComponent, bem] = createNamespace('tab'); export default createComponent({ props: { + dot: Boolean, type: String, + info: [Number, String], color: String, title: String, isActive: Boolean, @@ -59,16 +62,22 @@ export default createComponent({ ); diff --git a/src/tabs/index.js b/src/tabs/index.js index 058c6b470..1a5eac26e 100644 --- a/src/tabs/index.js +++ b/src/tabs/index.js @@ -269,6 +269,8 @@ export default createComponent({ ref="titles" refInFor type={type} + dot={item.dot} + info={item.info} title={item.title} color={this.color} style={item.titleStyle} diff --git a/src/tabs/index.less b/src/tabs/index.less index 01384b596..649e66876 100644 --- a/src/tabs/index.less +++ b/src/tabs/index.less @@ -12,10 +12,6 @@ text-align: center; cursor: pointer; - span { - display: block; - } - &--active { color: @tab-active-text-color; font-weight: @font-weight-bold; @@ -24,6 +20,10 @@ &--disabled { color: @tab-disabled-text-color; } + + &__text { + position: relative; + } } .van-tabs {