71 lines
1.9 KiB
Vue
71 lines
1.9 KiB
Vue
<template>
|
|
<div style="display: flex">
|
|
<a-tabs
|
|
v-model="activeKey"
|
|
tab-position="left"
|
|
style="flex: none"
|
|
:class="$store.state.app.multiTab ? 'ant-tabs-top-tabs' : 'ant-tabs-no-top-tabs'"
|
|
>
|
|
<!-- @change="onChange" -->
|
|
<a-tab-pane key="1" tab="Tab1"></a-tab-pane>
|
|
<a-tab-pane key="2" tab="Tab2"></a-tab-pane>
|
|
<a-tab-pane key="3" tab="Tab3"></a-tab-pane>
|
|
<a-tab-pane key="4" tab="Tab4"></a-tab-pane>
|
|
</a-tabs>
|
|
<div
|
|
ref="tabContainer"
|
|
id="tabContainer"
|
|
:class="
|
|
$store.state.app.multiTab ? 'router-wrapper-2-top-tabs' : 'router-wrapper-2-no-top-tabs'
|
|
"
|
|
style="backgroun-color: pink; flex: auto"
|
|
>
|
|
<component :is="'Tab' + activeKey"></component>
|
|
<!-- :updateScrollTop="updateScrollTop" -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Tab1 from '@/views/sideTabs/components/Tab1'
|
|
import Tab2 from '@/views/sideTabs/components/Tab2'
|
|
import Tab3 from '@/views/sideTabs/components/Tab3'
|
|
import Tab4 from '@/views/sideTabs/components/Tab4'
|
|
export default {
|
|
name: 'SideTab',
|
|
components: {
|
|
Tab1,
|
|
Tab2,
|
|
Tab3,
|
|
Tab4,
|
|
},
|
|
data() {
|
|
return {
|
|
activeKey: '1',
|
|
scrollTop: {
|
|
Tab1: 0,
|
|
Tab2: 0,
|
|
Tab3: 0,
|
|
Tab4: 0,
|
|
},
|
|
}
|
|
},
|
|
// methods: {
|
|
// onChange(activeKey) {
|
|
// console.log("切换到" + activeKey);
|
|
// this.activeKey = activeKey;
|
|
// console.log(this.scrollTop["Tab" + activeKey]);
|
|
// this.$refs.tabContainer.scrollTop = this.scrollTop["Tab" + activeKey];
|
|
// },
|
|
// updateScrollTop(activeKey) {
|
|
// console.log(document.getElementById("tabContainer").scrollTop);
|
|
// this.scrollTop["Tab" + activeKey] = this.$refs.tabContainer.scrollTop;
|
|
// }
|
|
// }
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
@import '~@/assets/less/common';
|
|
.layout-content-height();
|
|
</style>
|