blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-24 15:39:15 +08:00
Code Issues Projects Releases Wiki Activity

fix(Tabbar): before-change not work in route mode (#9855)

Browse Source
This commit is contained in:
neverland 2021-11-13 19:27:40 +08:00 committed by GitHub
parent 33ff262d8f
commit 35fa1e9a1d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,12 +27,12 @@ export default createComponent({
data() { data() {
return { return {
active: false, nameMatched: false,
}; };
}, },
computed: { computed: {
routeActive() { routeMatched() {
const { to, $route } = this; const { to, $route } = this;
if (to && $route) { if (to && $route) {
const config = isObject(to) ? to : { path: to }; const config = isObject(to) ? to : { path: to };
@ -42,17 +42,23 @@ export default createComponent({
return pathMatched || nameMatched; return pathMatched || nameMatched;
} }
}, },
active() {
return this.parent.route ? this.routeMatched : this.nameMatched;
},
}, },
methods: { methods: {
onClick(event) { onClick(event) {
this.parent.onChange(this.name || this.index); if (!this.active) {
this.parent.triggerChange(this.name || this.index, () => {
route(this.$router, this);
});
}
this.$emit('click', event); this.$emit('click', event);
route(this.$router, this);
}, },
genIcon(active) { genIcon() {
const slot = this.slots('icon', { active }); const slot = this.slots('icon', { active: this.active });
if (slot) { if (slot) {
return slot; return slot;
@ -65,7 +71,7 @@ export default createComponent({
}, },
render() { render() {
const active = this.parent.route ? this.routeActive : this.active; const { active } = this;
const color = this.parent[active ? 'activeColor' : 'inactiveColor']; const color = this.parent[active ? 'activeColor' : 'inactiveColor'];
if (process.env.NODE_ENV === 'development' && this.info) { if (process.env.NODE_ENV === 'development' && this.info) {
@ -77,7 +83,7 @@ export default createComponent({
return ( return (
<div class={bem({ active })} style={{ color }} onClick={this.onClick}> <div class={bem({ active })} style={{ color }} onClick={this.onClick}>
<div class={bem('icon')}> <div class={bem('icon')}>
{this.genIcon(active)} {this.genIcon()}
<Info dot={this.dot} info={this.badge ?? this.info} /> <Info dot={this.dot} info={this.badge ?? this.info} />
</div> </div>
<div class={bem('text')}>{this.slots('default', { active })}</div> <div class={bem('text')}>{this.slots('default', { active })}</div>

23
src/tabbar/index.js
View File

@ -63,21 +63,20 @@ export default createComponent({
methods: { methods: {
setActiveItem() { setActiveItem() {
this.children.forEach((item, index) => { this.children.forEach((item, index) => {
item.active = (item.name || index) === this.value; item.nameMatched = (item.name || index) === this.value;
}); });
}, },
onChange(active) { triggerChange(active, afterChange) {
if (active !== this.value) { callInterceptor({
callInterceptor({ interceptor: this.beforeChange,
interceptor: this.beforeChange, args: [active],
args: [active], done: () => {
done: () => { this.$emit('input', active);
this.$emit('input', active); this.$emit('change', active);
this.$emit('change', active); afterChange();
}, },
}); });
}
}, },
genTabbar() { genTabbar() {