Correct disabled forward navigation
This commit is contained in:
parent
7fa3f9efcb
commit
45dbc6fdea
2 changed files with 11 additions and 3 deletions
|
@ -171,6 +171,11 @@
|
|||
</div>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
<Tabs type="card">
|
||||
<TabPane label="标签一">标签一的内容</TabPane>
|
||||
<TabPane label="标签二" disabled>标签二的内容</TabPane>
|
||||
<TabPane label="标签三">标签三的内容</TabPane>
|
||||
</Tabs>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Add table
Reference in a new issue