Correct disabled forward navigation

This commit is contained in:
Sergio Crisostomo 2018-05-08 12:35:10 +02:00
parent 7fa3f9efcb
commit 45dbc6fdea
2 changed files with 11 additions and 3 deletions

View file

@ -171,6 +171,11 @@
</div>
</TabPane>
</Tabs>
<Tabs type="card">
<TabPane label="标签一">标签一的内容</TabPane>
<TabPane label="标签二" disabled>标签二的内容</TabPane>
<TabPane label="标签三">标签三的内容</TabPane>
</Tabs>
</div>
</template>
<script>

View file

@ -43,7 +43,7 @@
const currentIndex = list.findIndex(tab => tab.name === activeKey);
const nextIndex = (currentIndex + direction + list.length) % list.length;
const nextTab = list[nextIndex];
if (nextTab.disabled) return getNextTab(list, nextTab, direction, countDisabledAlso);
if (nextTab.disabled) return getNextTab(list, nextTab.name, direction, countDisabledAlso);
else return nextTab;
};
@ -237,8 +237,9 @@
this.focusedKey = nextTab.name;
},
handleTabKeyboardSelect(){
this.activeKey = this.focusedKey;
const nextIndex = this.navList.findIndex(tab => tab.name === this.focusedKey);
this.activeKey = this.focusedKey || 0;
const nextIndex = Math.max(this.navList.findIndex(tab => tab.name === this.focusedKey), 0);
[...this.$refs.panes.children].forEach((el, i) => {
if (nextIndex === i) {
[...el.children].forEach(child => child.style.display = 'block');
@ -411,6 +412,8 @@
this.mutationObserver.observe(hiddenParentNode, { attributes: true, childList: true, characterData: true, attributeFilter: ['style'] });
}
this.handleTabKeyboardSelect();
},
beforeDestroy() {
this.observer.removeListener(this.$refs.navWrap, this.handleResize);