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

fix(Tabs): incorrect change event in some cases (#7461)

Browse Source
This commit is contained in:
neverland 2020-10-31 17:35:33 +08:00 committed by GitHub
parent 836be2c639
commit 0cc11a45e1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 39 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/tab/test/__snapshots__/index.spec.js.snap
View File

@ -315,10 +315,10 @@ exports[`swipe to switch tab 2`] = `
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
<div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
<div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
<div class="van-tabs__line"></div>
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
</div>
</div>
<div class="van-tabs__content">
@ -335,10 +335,10 @@ exports[`swipe to switch tab 3`] = `
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
<div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
<div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
<div class="van-tabs__line"></div>
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
</div>
</div>
<div class="van-tabs__content">

14
src/tab/test/index.spec.js
View File

@ -61,12 +61,17 @@ test('swipe to switch tab', async () => {
const onChange = jest.fn();
const wrapper = mount({
template: `
<van-tabs swipeable @change="onChange">
<van-tabs v-model="active" swipeable @change="onChange">
<van-tab title="title1">Text</van-tab>
<van-tab title="title2">Text</van-tab>
<van-tab title="title3" disabled>Text</van-tab>
</van-tabs>
`,
data() {
return {
active: 0,
};
},
methods: {
onChange,
},
@ -174,7 +179,7 @@ test('name prop', async () => {
const wrapper = mount({
template: `
<van-tabs @click="onClick" @disabled="onDisabled" @change="onChange">
<van-tabs v-model="active" @click="onClick" @disabled="onDisabled" @change="onChange">
<van-tab title="title1" name="a">Text</van-tab>
<van-tab title="title2" name="b">Text</van-tab>
<van-tab title="title3" name="c" disabled>Text</van-tab>
@ -185,6 +190,11 @@ test('name prop', async () => {
onChange,
onDisabled,
},
data() {
return {
active: 0,
};
},
});
await later();

9
src/tab/test/insert.spec.js
View File

@ -27,9 +27,10 @@ test('insert tab dynamically', async () => {
});
test('insert tab with name dynamically', async () => {
const onChange = jest.fn();
const wrapper = mount({
template: `
<van-tabs v-model="active">
<van-tabs v-model="active" @change="onChange">
<van-tab v-if="insert" title="1" name="bar">2</van-tab>
<van-tab title="2" name="foo">1</van-tab>
</van-tabs>
@ -37,14 +38,18 @@ test('insert tab with name dynamically', async () => {
data() {
return {
insert: false,
active: [{ name: 'foo', title: 'foo' }],
active: 'foo',
};
},
methods: {
onChange,
},
});
await later();
wrapper.setData({ insert: true });
expect(wrapper).toMatchSnapshot();
expect(onChange).toHaveBeenCalledTimes(0);
});
// this case will throw wierd error in index.spec.js

24
src/tabs/index.js
View File

@ -240,19 +240,23 @@ export default createComponent({
},
setCurrentIndex(currentIndex) {
currentIndex = this.findAvailableTab(currentIndex);
const newIndex = this.findAvailableTab(currentIndex);
if (isDef(currentIndex) && currentIndex !== this.currentIndex) {
const shouldEmitChange = this.currentIndex !== null;
this.currentIndex = currentIndex;
this.$emit('input', this.currentName);
if (!isDef(newIndex)) {
return;
}
const newTab = this.children[newIndex];
const newName = newTab.computedName;
const shouldEmitChange = this.currentIndex !== null;
this.currentIndex = newIndex;
if (newName !== this.active) {
this.$emit('input', newName);
if (shouldEmitChange) {
this.$emit(
'change',
this.currentName,
this.children[currentIndex].title
);
this.$emit('change', newName, newTab.title);
}
}
},