。el-tabs__item{
背景色:#cccccc!重要;
顏色:# 666666;!重要;
保證金:5px!重要;
}
設置單擊活動名稱改變顏色的值。
。El-tabs-card & gt;。el-tabs__header。el-tabs__item.is-active{
顏色:#e64545!重要;
}
就寫這麽多任性哈哈
Div部分
& ltbutton class="showInputclass " >手稿管理
& ltbutton class = " showInputclass " @ click = " showInputone "?v-if="buttonshoucangif " >+添加收藏夾
& ltdiv class = " showInputonewropclass " >?
& ltinput type = " text " v-model = " vmodelinpath " v-if = " showInputoneif " class = " inputshou " & gt。
& ltbutton @ click = " addTab(editabletabsvalue 2)" class = " showInputoneclass " v-if = " showInputoneif " & gt;
?完成
?& lt/button & gt;
& ltEl-tabs v-model = " editable tabs value 2 " type = " card " closed @ tab-remove = " remove tab " >
& ltel選項卡窗格
?v-for="(item,index) in editableTabs2 "
?:key="item.name "
?:label="item.title "
?:name="item.name "
& gt
?{{item.content}}
& lt/El-tab-pane & gt;
& lt/El-tabs & gt;
部分VUE。射流研究…
數據:{
editabletabsvalue 2:“1”,
可編輯標簽2: [{
?標題:“默認收藏夾”,
?名稱:' 1 ',
?內容:“選項卡默認收藏夾”
},
{
?標題:“收藏夾1”,
?名稱:“2”,
?內容:'標簽收藏夾1內在榮耀'
}
],
tabIndex: 2,
vmodelinputh:" ",
}
方法:{
showInputone(){
this.showInputoneif=true
},
?addTab(targetName) {
?設new tabname = ++ this . tabindex+' ';
?this.editableTabs2.push({
標題:this.vmodelinputh,
名稱:newTabName,
內容:“新選項卡內容”
?});
?this . editabletabsvalue 2 = new tabname;
?this.buttonshoucangif=false
?this.vmodelinputh = " "
},
removeTab(targetName){
?let tabs = this . editable tabs 2;
?let active name = this . editabletabsvalue 2;
?if (activeName === targetName) {
Alert("您確定要刪除收藏夾嗎")
tabs.forEach((tab,index)= & gt;{
?if (tab.name === targetName) {
let next tab = tabs[index+1]| | tabs[index-1];
if (nextTab) {
?active name = next tab . name;
}
?}
});
this . editabletabsvalue 2 = active name;
this . editable tabs 2 = tabs . filter(tab = & gt;tab.name!= = target name);
}
?},
}