diff --git a/src/nav-bar/test/index.spec.js b/src/nav-bar/test/index.spec.js
index 99aab1a7c..63149c6e0 100644
--- a/src/nav-bar/test/index.spec.js
+++ b/src/nav-bar/test/index.spec.js
@@ -1,5 +1,5 @@
import NavBar from '..';
-import { mount } from '../../../test';
+import { mount, mockGetBoundingClientRect } from '../../../test';
test('render left & right slot', () => {
const wrapper = mount(NavBar, {
@@ -23,6 +23,8 @@ test('render title slot', () => {
});
test('placeholder prop', () => {
+ const restore = mockGetBoundingClientRect({ height: 50 });
+
const wrapper = mount(NavBar, {
propsData: {
fixed: true,
@@ -31,6 +33,8 @@ test('placeholder prop', () => {
});
expect(wrapper).toMatchSnapshot();
+
+ restore();
});
test('click-left event', () => {
diff --git a/src/tabbar/README.md b/src/tabbar/README.md
index 90671ea4a..37ca74bdd 100644
--- a/src/tabbar/README.md
+++ b/src/tabbar/README.md
@@ -163,6 +163,7 @@ export default {
| active-color | Color of active tab item | *string* | `#1989fa` |
| inactive-color | Color of inactive tab item | *string* | `#7d7e80` |
| route | Whether to enable route mode | *boolean* | `false` |
+| placeholder `v2.6.0` | Whether to generage a placeholder element when fixed | *boolean* | `false` |
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | *boolean* | `false` |
### Tabbar Events
diff --git a/src/tabbar/README.zh-CN.md b/src/tabbar/README.zh-CN.md
index fd224facf..36eb1aabe 100644
--- a/src/tabbar/README.zh-CN.md
+++ b/src/tabbar/README.zh-CN.md
@@ -170,6 +170,7 @@ export default {
| active-color | 选中标签的颜色 | *string* | `#1989fa` |
| inactive-color | 未选中标签的颜色 | *string* | `#7d7e80` |
| route | 是否开启路由模式 | *boolean* | `false` |
+| placeholder `v2.6.0` | 固定在底部时,是否在标签位置生成一个等高的占位元素 | *boolean* | `false` |
| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei),设置 fixed 时默认开启 | *boolean* | `false` |
### Tabbar Events
diff --git a/src/tabbar/index.js b/src/tabbar/index.js
index 4193e7047..27b5d445b 100644
--- a/src/tabbar/index.js
+++ b/src/tabbar/index.js
@@ -10,6 +10,7 @@ export default createComponent({
props: {
route: Boolean,
zIndex: [Number, String],
+ placeholder: Boolean,
activeColor: String,
inactiveColor: String,
value: {
@@ -30,6 +31,12 @@ export default createComponent({
},
},
+ data() {
+ return {
+ height: null,
+ };
+ },
+
computed: {
fit() {
if (this.safeAreaInsetBottom !== null) {
@@ -45,6 +52,12 @@ export default createComponent({
children: 'setActiveItem',
},
+ mounted() {
+ if (this.placeholder && this.fixed) {
+ this.height = this.$refs.tabbar.getBoundingClientRect().height;
+ }
+ },
+
methods: {
setActiveItem() {
this.children.forEach((item, index) => {
@@ -58,22 +71,35 @@ export default createComponent({
this.$emit('change', active);
}
},
+
+ genTabbar() {
+ return (
+
+ {this.slots()}
+
+ );
+ },
},
render() {
- return (
-
- {this.slots()}
-
- );
+ if (this.placeholder && this.fixed) {
+ return (
+
+ {this.genTabbar()}
+
+ );
+ }
+
+ return this.genTabbar();
},
});
diff --git a/src/tabbar/test/__snapshots__/index.spec.js.snap b/src/tabbar/test/__snapshots__/index.spec.js.snap
index f0b3d6e7e..9904a7823 100644
--- a/src/tabbar/test/__snapshots__/index.spec.js.snap
+++ b/src/tabbar/test/__snapshots__/index.spec.js.snap
@@ -2,6 +2,12 @@
exports[`disable border 1`] = `
`;
+exports[`placeholder prop 1`] = `
+
+`;
+
exports[`route mode 1`] = `
diff --git a/src/tabbar/test/index.spec.js b/src/tabbar/test/index.spec.js
index 96e451538..b2c757875 100644
--- a/src/tabbar/test/index.spec.js
+++ b/src/tabbar/test/index.spec.js
@@ -1,5 +1,5 @@
import VueRouter from 'vue-router';
-import { mount, later } from '../../../test';
+import { mount, later, mockGetBoundingClientRect } from '../../../test';
import Vue from 'vue';
import Tabbar from '..';
@@ -174,3 +174,18 @@ test('disable border', () => {
expect(wrapper).toMatchSnapshot();
});
+
+test('placeholder prop', () => {
+ const restore = mockGetBoundingClientRect({ height: 50 });
+
+ const wrapper = mount(Tabbar, {
+ propsData: {
+ fixed: true,
+ placeholder: true,
+ },
+ });
+
+ expect(wrapper).toMatchSnapshot();
+
+ restore();
+});