+
diff --git a/packages/tab/zh-CN.md b/packages/tab/zh-CN.md
index 3c4ed2590..91bb3af88 100644
--- a/packages/tab/zh-CN.md
+++ b/packages/tab/zh-CN.md
@@ -146,6 +146,7 @@ export default {
| line-width | 底部条宽度 (px) | `Number` | 与当前标签等宽 |
| swipe-threshold | 滚动阀值,设置 Tab 超过多少个可滚动 | `Number` | `4` |
| sticky | 是否使用粘性定位布局 | `Boolean` | `false` |
+| offset-top | 粘性定位布局下与顶部的最小距离 (px) | `Number` | `0` |
| swipeable | 是否可以滑动内容切换 | `Boolean` | `false` |
### Tab API
diff --git a/packages/tabs/index.vue b/packages/tabs/index.vue
index bfd1b33b9..cb5289cd1 100644
--- a/packages/tabs/index.vue
+++ b/packages/tabs/index.vue
@@ -2,8 +2,9 @@
@@ -64,13 +65,17 @@ export default create({
swipeThreshold: {
type: Number,
default: 4
+ },
+ offsetTop: {
+ type: Number,
+ default: 0
}
},
data() {
return {
tabs: [],
- position: 'content-top',
+ position: '',
curActive: null,
lineStyle: {},
events: {
@@ -85,6 +90,23 @@ export default create({
// whether the nav is scrollable
scrollable() {
return this.tabs.length > this.swipeThreshold;
+ },
+
+ wrapStyle() {
+ switch (this.position) {
+ case 'top':
+ return {
+ top: this.offsetTop + 'px',
+ position: 'fixed'
+ };
+ case 'bottom':
+ return {
+ top: 'auto',
+ bottom: 0
+ };
+ default:
+ return null;
+ }
}
},
@@ -197,15 +219,15 @@ export default create({
// adjust tab position
onScroll() {
- const scrollTop = scrollUtils.getScrollTop(window);
+ const scrollTop = scrollUtils.getScrollTop(window) + this.offsetTop;
const elTopToPageTop = scrollUtils.getElementTop(this.$el);
const elBottomToPageTop = elTopToPageTop + this.$el.offsetHeight - this.$refs.wrap.offsetHeight;
if (scrollTop > elBottomToPageTop) {
- this.position = 'content-bottom';
+ this.position = 'bottom';
} else if (scrollTop > elTopToPageTop) {
- this.position = 'page-top';
+ this.position = 'top';
} else {
- this.position = 'content-top';
+ this.position = '';
}
},