diff --git a/docs/markdown/v2-progress-tracking.md b/docs/markdown/v2-progress-tracking.md
index 50cd57879..4becf6a98 100644
--- a/docs/markdown/v2-progress-tracking.md
+++ b/docs/markdown/v2-progress-tracking.md
@@ -143,6 +143,7 @@
### Tabbar
+- 新增`route`属性
- 新增`inactive-color`属性
### TreeSelect
diff --git a/packages/tabbar-item/index.js b/packages/tabbar-item/index.js
index dd86de430..ec5d63b51 100644
--- a/packages/tabbar-item/index.js
+++ b/packages/tabbar-item/index.js
@@ -1,4 +1,4 @@
-import { use } from '../utils';
+import { use, isObj } from '../utils';
import Icon from '../icon';
import Info from '../info';
import { route, routeProps } from '../utils/router';
@@ -22,6 +22,16 @@ export default sfc({
};
},
+ computed: {
+ routeActive() {
+ const { to, $route } = this;
+ if (to && $route) {
+ const path = isObj(to) ? to.path : to;
+ return $route.path === path;
+ }
+ }
+ },
+
methods: {
onClick(event) {
this.parent.onChange(this.index);
@@ -31,7 +41,8 @@ export default sfc({
},
render(h) {
- const { icon, slots, active } = this;
+ const { icon, slots } = this;
+ const active = this.parent.route ? this.routeActive : this.active;
const color = this.parent[active ? 'activeColor' : 'inactiveColor'];
return (
diff --git a/packages/tabbar/en-US.md b/packages/tabbar/en-US.md
index 1b4938a8b..4266fd40f 100644
--- a/packages/tabbar/en-US.md
+++ b/packages/tabbar/en-US.md
@@ -89,6 +89,29 @@ export default {
```
+#### Route Mode
+
+```html
+
+
+
+
+ Tab
+
+
+ Tab
+
+
+```
+
### Tabbar Props
| Attribute | Description | Type | Default |
@@ -98,6 +121,7 @@ export default {
| z-index | Z-index | `Number` | `1` |
| 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` |
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation, to enable those features use `viewport-fit=cover` in the `viewport` meta tag | `Boolean` | `false` |
### Tabbar Events
diff --git a/packages/tabbar/index.js b/packages/tabbar/index.js
index 90f37eb58..5261dae7b 100644
--- a/packages/tabbar/index.js
+++ b/packages/tabbar/index.js
@@ -8,6 +8,7 @@ export default sfc({
props: {
value: Number,
+ route: Boolean,
activeColor: String,
inactiveColor: String,
safeAreaInsetBottom: Boolean,
diff --git a/packages/tabbar/test/__snapshots__/index.spec.js.snap b/packages/tabbar/test/__snapshots__/index.spec.js.snap
new file mode 100644
index 000000000..0dd9075b3
--- /dev/null
+++ b/packages/tabbar/test/__snapshots__/index.spec.js.snap
@@ -0,0 +1,129 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`route mode 1`] = `
+
+`;
+
+exports[`route mode 2`] = `
+
+`;
+
+exports[`route mode 3`] = `
+
+`;
+
+exports[`watch tabbar value 1`] = `
+
+`;
diff --git a/packages/tabbar/test/index.spec.js b/packages/tabbar/test/index.spec.js
new file mode 100644
index 000000000..4ae7219c2
--- /dev/null
+++ b/packages/tabbar/test/index.spec.js
@@ -0,0 +1,90 @@
+import { mount, later } from '../../../test/utils';
+import Vue from 'vue';
+import Tabbar from '..';
+import TabbarItem from '../../tabbar-item';
+
+Vue.use(Tabbar);
+Vue.use(TabbarItem);
+
+test('route mode', async () => {
+ Vue.util.defineReactive(Vue.prototype, '$route', { path: '/home' });
+
+ Vue.prototype.$router = {
+ replace(to) {
+ Vue.prototype.$route.path = typeof to === 'string' ? to : to.path;
+ }
+ };
+
+ const wrapper = mount({
+ template: `
+
+
+ Tab
+
+
+ Tab
+
+
+ Tab
+
+
+ Tab
+
+
+ `
+ });
+
+ expect(wrapper).toMatchSnapshot();
+
+ const items = wrapper.findAll('.van-tabbar-item');
+
+ items.at(1).trigger('click');
+ await later();
+ expect(wrapper).toMatchSnapshot();
+
+ items.at(2).trigger('click');
+ items.at(3).trigger('click');
+ await later();
+ expect(wrapper).toMatchSnapshot();
+});
+
+
+test('watch tabbar value', () => {
+ const wrapper = mount({
+ template: `
+
+ Tab
+ Tab
+
+ `,
+ data() {
+ return {
+ value: 0
+ };
+ }
+ });
+
+ wrapper.setData({ value: 1 });
+ expect(wrapper).toMatchSnapshot();
+});
+
+test('click event', () => {
+ const onClick = jest.fn();
+ const onChange = jest.fn();
+
+ const wrapper = mount({
+ template: `
+
+ Tab
+
+ `,
+ methods: {
+ onClick,
+ onChange
+ }
+ });
+
+ wrapper.find('.van-tabbar-item').trigger('click');
+ expect(onClick).toHaveBeenCalledTimes(1);
+ expect(onChange).toHaveBeenCalledTimes(0);
+});
diff --git a/packages/tabbar/zh-CN.md b/packages/tabbar/zh-CN.md
index e54c30101..4edd12313 100644
--- a/packages/tabbar/zh-CN.md
+++ b/packages/tabbar/zh-CN.md
@@ -89,6 +89,31 @@ export default {
```
+#### 路由模式
+
+标签栏支持路由模式，用于搭配`vue-router`使用。路由模式下会匹配页面路径和标签的`to`属性，并自动选中对应的标签
+
+```html
+
+
+
+
+ 标签
+
+
+ 标签
+
+
+```
+
### Tabbar Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -98,6 +123,7 @@ export default {
| z-index | 元素 z-index | `Number` | `1` | 1.1.9 |
| active-color | 选中标签的颜色 | `String` | `#1989fa` | 1.5.1 |
| inactive-color | 未选中标签的颜色 | `String` | `#7d7e80` | 2.0.0 |
+| route | 是否开启路由模式 | `Boolean` | `false` | 2.0.0 |
| safe-area-inset-bottom | 是否开启 iPhone X 底部安全区适配，需要在 `viewport` meta 标签中设置 `viewport-fit=cover` | `Boolean` | `false` | 1.6.15 |
### Tabbar Events