blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-27 03:46:35 +08:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/tabbar-item/index.js
View File

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

42
src/tabbar/test/__snapshots__/index.spec.js.snap
View File

@ -113,6 +113,48 @@ exports[`route mode 3`] = `
</div> </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`] = ` exports[`watch tabbar value 1`] = `
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;"> <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">

34
src/tabbar/test/index.spec.js
View File

@ -44,6 +44,40 @@ test('route mode', async () => {
expect(wrapper).toMatchSnapshot(); 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 => { test('router NavigationDuplicated', async done => {
expect(async () => { expect(async () => {
const router = new VueRouter(); const router = new VueRouter();