I"m doing a background tab to switch between different options, add different panels, and then add different vue components to the panel
the basic style is as follows, no problem at this time
"" ""
wangeditorwrite_article.vuevuemounted
write_article.vue
-sharp-sharp-sharp F5
" X " "" emmmmmmm.......
"" F5 "" F5
the strange problem is that the first red box cannot be edited, but the second red box can edit emmmmmmm, and the log is also output many times. I think it is the problem of wangeditor creation. I don"t know if there is something wrong with the way I load the component, or if there is any incompatibility. I hope you can take a look at it. Below, I will post the specific code for loading the component
.this is the Tabs click method, which is the direct click tab title mentioned above,
<Tabs class="style-tab" type="card" v-model="activeIndex" closable @on-tab-remove="removeTab" @on-click="TabClick">
//
TabClick:function(){
var path = "/404";
for (var i = 0 ;i<this.submenuList.length;iPP){
for (var j = 0;j<this.submenuList[i].childList.length;jPP){
if (this.submenuList[i].childList[j].child_index === this.activeIndex){
path = this.submenuList[i].childList[j].to_path;
}
}
}
console.log("TabClick "+this.intIPP);
this.$router.push({name:path})
},
this is what is triggered when the Tab tab is closed, which is triggered when you click"x" next to the title of that tab.
//tab
removeTab(childIndex) {
var path = "ServiceController";
this.openNames.remove(childIndex);
/** **/
let tabs = this.editableTabs;
this.editableTabs = tabs.filter(tab => tab.index !== childIndex);
for (var i = 0 ;i<this.submenuList.length;iPP){
for (var j = 0;j<this.submenuList[i].childList.length;jPP){
if (this.submenuList[i].childList[j].child_index === this.activeIndex){
path = this.submenuList[i].childList[j].to_path;
}
}
}
console.log("removeTab "+this.intIPP);
this.$router.push({name:path})
},
this is when I implement the F5 refresh to determine whether the operation of the open panel is recorded and load the contents of the tab being displayed
//ajaxmounted
mounted:function () {
var open = localStorage.getItem("open-names");
var active = localStorage.getItem("active-name");
if (null != open){
// console.log(" openNames value:"+this.openNames);
this.openNames = open.split(",");
// console.log(" openNames value:"+this.openNames+" openNames :"+this.openNames.length);
for (var i=0;i<this.openNames.length;iPP){
// console.log(" : "+this.openNames[i]);
for (var j=0;j<this.submenuList.length;jPP){
for (var k=0;k<this.submenuList[j].childList.length;kPP){
//openNames
if (this.submenuList[j].childList[k].child_index === this.openNames[i]){
// console.log(":"+this.submenuList[j].childList[k]);
this.editableTabs.push({
title: this.submenuList[j].childList[k].child_title,//
index: this.submenuList[j].childList[k].child_index, //
content: this.submenuList[j].childList[k].to_path,//
});
//
if (this.submenuList[j].childList[k].child_index === active){
console.log("mounted "+this.intIPP);
this.$router.push({name:this.submenuList[j].childList[k].to_path});
this.activeIndex = active;
}
}
}
}
}
}else {//ServiceController
console.log("mounted "+this.intIPP);
this.$router.push({name:"ServiceController"})
}
},
