tab-bar.vue
1.73 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<template>
<div class="el-tabs__active-bar" :class="`is-${ rootTabs.tabPosition }`" :style="barStyle"></div>
</template>
<script>
import { arrayFind } from 'element-ui/src/utils/util';
export default {
name: 'TabBar',
props: {
tabs: Array
},
inject: ['rootTabs'],
computed: {
barStyle: {
get() {
let style = {};
let offset = 0;
let tabSize = 0;
const sizeName = ['top', 'bottom'].indexOf(this.rootTabs.tabPosition) !== -1 ? 'width' : 'height';
const sizeDir = sizeName === 'width' ? 'x' : 'y';
const firstUpperCase = str => {
return str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
};
this.tabs.every((tab, index) => {
let $el = arrayFind(this.$parent.$refs.tabs || [], t => t.id.replace('tab-', '') === tab.paneName);
if (!$el) { return false; }
if (!tab.active) {
offset += $el[`client${firstUpperCase(sizeName)}`];
return true;
} else {
tabSize = $el[`client${firstUpperCase(sizeName)}`];
if (sizeName === 'width' && this.tabs.length > 1) {
tabSize -= (index === 0 || index === this.tabs.length - 1) ? 20 : 40;
}
return false;
}
});
if (sizeName === 'width' && offset !== 0) {
offset += 20;
}
const transform = `translate${firstUpperCase(sizeDir)}(${offset}px)`;
style[sizeName] = tabSize + 'px';
style.transform = transform;
style.msTransform = transform;
style.webkitTransform = transform;
return style;
}
}
}
};
</script>