|
@@ -101,7 +101,7 @@
|
|
|
<body>
|
|
<body>
|
|
|
<div id="app" class="tab-container">
|
|
<div id="app" class="tab-container">
|
|
|
<!-- 标签导航 -->
|
|
<!-- 标签导航 -->
|
|
|
- <el-tabs v-model="activeTab" @tab-click="handleTabClick" type="card">
|
|
|
|
|
|
|
+ <el-tabs v-model="activeTab" @tab-click="handleTabClick" type="card" ref="navTabs">
|
|
|
<el-tab-pane
|
|
<el-tab-pane
|
|
|
v-for="(content, tabName) in myObj"
|
|
v-for="(content, tabName) in myObj"
|
|
|
:key="tabName"
|
|
:key="tabName"
|
|
@@ -264,9 +264,27 @@
|
|
|
// 备份页面或分享页面，设置为只读
|
|
// 备份页面或分享页面，设置为只读
|
|
|
this.readOnly = true;
|
|
this.readOnly = true;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+ this.mouseOver();
|
|
|
});
|
|
});
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
|
|
+ // 鼠标滑过，切换tabs
|
|
|
|
|
+ mouseOver() {
|
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
|
+ this.$refs.navTabs.$refs.nav.$nextTick(() => {
|
|
|
|
|
+ // console.log('$refs.nav', this.$refs.navTabs.$refs.nav.$el)
|
|
|
|
|
+ // 此时tab的nav才渲染dom 否则拿不到el-tabs__item
|
|
|
|
|
+ const target = document.getElementsByClassName('el-tabs__item')
|
|
|
|
|
+ for (let i = 0; i < target.length; i++) {
|
|
|
|
|
+ target[i].addEventListener('mouseover', () => {
|
|
|
|
|
+ target[i].click();
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ // 获取初始化activeTab
|
|
|
get_init_activeTab() {
|
|
get_init_activeTab() {
|
|
|
return sessionStorage.getItem("tab-" + pageManager.id) || Object.keys(this.myObj)[0] || '';
|
|
return sessionStorage.getItem("tab-" + pageManager.id) || Object.keys(this.myObj)[0] || '';
|
|
|
},
|
|
},
|
tianyun