diff --git a/packages/tab/en-US.md b/packages/tab/en-US.md index 0f74deee5..8817b51a9 100644 --- a/packages/tab/en-US.md +++ b/packages/tab/en-US.md @@ -160,6 +160,7 @@ In swipeable mode, you can switch tabs with swipe gestrue in the content | offset-top | Offset top when use sticky mode | `Number` | `0` | | swipeable | Whether to switch tabs with swipe gestrue in the content | `Boolean` | `false` | | animated | Whether to change tabs with animation | `Boolean` | `false` | +| ellipsis | Whether to ellipsis too long title | `Boolean` | `true` | ### Tab API diff --git a/packages/tab/zh-CN.md b/packages/tab/zh-CN.md index 38b9a3429..df8d2f677 100644 --- a/packages/tab/zh-CN.md +++ b/packages/tab/zh-CN.md @@ -164,6 +164,7 @@ export default { | offset-top | 粘性定位布局下与顶部的最小距离,单位 px | `Number` | `0` | 1.1.15 | | swipe-threshold | 滚动阈值,标签数量超过多少个可滚动 | `Number` | `4` | - | | animated | 是否开启切换标签内容时的转场动画 | `Boolean` | `false` | 1.4.5 | +| ellipsis | 是否省略过长的标题文字 | `Boolean` | `true` | 1.5.0 | ### Tab API diff --git a/packages/tabs/index.less b/packages/tabs/index.less index aceac6d36..0e1b89ebd 100644 --- a/packages/tabs/index.less +++ b/packages/tabs/index.less @@ -50,6 +50,10 @@ &--scrollable { .van-tab { flex: 0 0 22%; + + &--complete { + flex: 1 0 auto; + } } .van-tabs__nav { diff --git a/packages/tabs/index.vue b/packages/tabs/index.vue index d461977d6..976387215 100644 --- a/packages/tabs/index.vue +++ b/packages/tabs/index.vue @@ -24,14 +24,15 @@ class="van-tab" :class="{ 'van-tab--active': index === curActive, - 'van-tab--disabled': tab.disabled + 'van-tab--disabled': tab.disabled, + 'van-tab--complete': !ellipsis }" :style="getTabStyle(tab, index)" @click="onClick(index)" > {{ tab.title }} @@ -75,6 +76,10 @@ export default create({ animated: Boolean, offsetTop: Number, swipeable: Boolean, + ellipsis: { + type: Boolean, + default: true + }, lineWidth: { type: Number, default: null @@ -115,7 +120,7 @@ export default create({ computed: { // whether the nav is scrollable scrollable() { - return this.tabs.length > this.swipeThreshold; + return this.tabs.length > this.swipeThreshold || !this.ellipsis; }, wrapStyle() { @@ -423,7 +428,7 @@ export default create({ } } - if (this.scrollable) { + if (this.scrollable && this.ellipsis) { style.flexBasis = 88 / (this.swipeThreshold) + '%'; }