drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Correct disabled forward navigation

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

5
examples/routers/tabs.vue
View file

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

9
src/components/tabs/tabs.vue
View file

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