diff --git a/packages/dialog/en-US.md b/packages/dialog/en-US.md index 34d953f4d..5077f61c4 100644 --- a/packages/dialog/en-US.md +++ b/packages/dialog/en-US.md @@ -4,6 +4,8 @@ ```js import { Dialog } from 'vant'; + +Vue.use(Dialog); ``` ### Usage diff --git a/packages/dialog/zh-CN.md b/packages/dialog/zh-CN.md index 63845fecb..54ee13df6 100644 --- a/packages/dialog/zh-CN.md +++ b/packages/dialog/zh-CN.md @@ -5,6 +5,8 @@ Dialog 组件支持函数调用和组件调用两种形式 ```js import { Dialog } from 'vant'; + +Vue.use(Dialog); ``` ### 代码演示 @@ -83,7 +85,7 @@ export default { #### 高级用法 -如果需要在弹窗内实现更复杂的交互,可以通过组件形式来调用 Dialog +如果需要在弹窗内实现更复杂的交互,可以通过组件形式来调用 Dialog,调用前需要通过 Vue.use 注册组件 ```html
-
+
@@ -31,7 +31,7 @@ exports[`renders demo correctly 1`] = `
-
+
@@ -74,7 +74,7 @@ exports[`renders demo correctly 1`] = `
-
+
@@ -101,7 +101,7 @@ exports[`renders demo correctly 1`] = `
-
+
@@ -128,7 +128,7 @@ exports[`renders demo correctly 1`] = `
-
+
@@ -155,7 +155,7 @@ exports[`renders demo correctly 1`] = `
-
+
@@ -182,7 +182,7 @@ exports[`renders demo correctly 1`] = `
-
+
@@ -213,7 +213,7 @@ exports[`renders demo correctly 1`] = `
-
+
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 = ''; } },