github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Tabs: update on resize, fixed (#3890) (#3938) 

* Tabs: update on resize, fixed #3890

* Tabs: update on resize, fixed #3890
pull/4047/head
pengchongfu 2017-04-06 18:55:59 +08:00 committed by baiyaaaaa
parent cc1349eba9
commit 640054bd1c
1 changed files with 30 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
packages/tabs/src/tab-nav.vue
View File

@ -1,5 +1,6 @@
<script>
import TabBar from './tab-bar';
import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';
function noop() {}
@ -90,26 +91,31 @@
},
setOffset(value) {
this.navStyle.transform = `translateX(-${value}px)`;
},
update() {
const navWidth = this.$refs.nav.offsetWidth;
const containerWidth = this.$refs.navScroll.offsetWidth;
const currentOffset = this.getCurrentScrollOffset();
if (containerWidth < navWidth) {
const currentOffset = this.getCurrentScrollOffset();
this.scrollable = this.scrollable || {};
this.scrollable.prev = currentOffset;
this.scrollable.next = currentOffset + containerWidth < navWidth;
if (navWidth - currentOffset < containerWidth) {
this.setOffset(navWidth - containerWidth);
}
} else {
this.scrollable = false;
if (currentOffset > 0) {
this.setOffset(0);
}
}
}
},
updated() {
const navWidth = this.$refs.nav.offsetWidth;
const containerWidth = this.$refs.navScroll.offsetWidth;
const currentOffset = this.getCurrentScrollOffset();
if (containerWidth < navWidth) {
const currentOffset = this.getCurrentScrollOffset();
this.scrollable = this.scrollable || {};
this.scrollable.prev = currentOffset;
this.scrollable.next = currentOffset + containerWidth < navWidth;
if (navWidth - currentOffset < containerWidth) {
this.setOffset(navWidth - containerWidth);
}
} else if (currentOffset > 0) {
this.scrollable = false;
this.setOffset(0);
}
this.update();
},
render(h) {
@ -170,6 +176,14 @@
</div>
</div>
);
},
mounted() {
addResizeListener(this.$el, this.update);
},
beforeDestroy() {
if (this.$el && this.update) removeResizeListener(this.$el, this.update);
}
};
</script>