[new feature] Tabbar: support match route by to.name (#4148)

This commit is contained in:
neverland 2019-08-19 11:27:05 +08:00 committed by GitHub
parent 4e828fbc70
commit 643003b43c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 78 additions and 2 deletions

View File

@ -27,8 +27,8 @@ export default createComponent({
routeActive() {
const { to, $route } = this;
if (to && $route) {
const path = isObj(to) ? to.path : to;
return $route.path === path;
const config = isObj(to) ? to : { path: to };
return config.path === $route.path || config.name === $route.name;
}
}
},

View File

@ -113,6 +113,48 @@ exports[`route mode 3`] = `
</div>
`;
exports[`route mode match by name 1`] = `
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;">
<div class="van-tabbar-item van-tabbar-item--active">
<div class="van-tabbar-item__icon">
<!---->
</div>
<div class="van-tabbar-item__text">
Tab
</div>
</div>
<div class="van-tabbar-item">
<div class="van-tabbar-item__icon">
<!---->
</div>
<div class="van-tabbar-item__text">
Tab
</div>
</div>
</div>
`;
exports[`route mode match by name 2`] = `
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;">
<div class="van-tabbar-item">
<div class="van-tabbar-item__icon">
<!---->
</div>
<div class="van-tabbar-item__text">
Tab
</div>
</div>
<div class="van-tabbar-item van-tabbar-item--active">
<div class="van-tabbar-item__icon">
<!---->
</div>
<div class="van-tabbar-item__text">
Tab
</div>
</div>
</div>
`;
exports[`watch tabbar value 1`] = `
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;">
<div class="van-tabbar-item">

View File

@ -44,6 +44,40 @@ test('route mode', async () => {
expect(wrapper).toMatchSnapshot();
});
test('route mode match by name', async () => {
const Foo = { render: () => 'Foo' };
const Bar = { render: () => 'Bar' };
const router = new VueRouter({
routes: [
{ path: '/foo', component: Foo, name: 'foo' },
{ path: '/bar', component: Bar, name: 'bar' }
]
});
const wrapper = mount({
router,
template: `
<van-tabbar route>
<van-tabbar-item :to="{ name: 'foo' }">
Tab
</van-tabbar-item>
<van-tabbar-item :to="{ name: 'bar' }">
Tab
</van-tabbar-item>
</van-tabbar>
`
});
const items = wrapper.findAll('.van-tabbar-item');
items.at(0).trigger('click');
await later();
expect(wrapper).toMatchSnapshot();
items.at(1).trigger('click');
await later();
expect(wrapper).toMatchSnapshot();
});
test('router NavigationDuplicated', async done => {
expect(async () => {
const router = new VueRouter();