巨丑vue

<template>
 <div>
   <div class="demo-type" align="right" style="height: 78px">
     <div style="float:left;margin-top: 10px">
       <img src="../../static/img/logo.png"></img>
     </div>
     <div style="float:right;margin-right: 20px;margin-top: 7px;">
       <el-col :span="1">
         <div class="sub-title">circle</div>
         <div class="demo-basic--circle">
             <el-avatar  :src="circleUrl"></el-avatar>
         </div>
       </el-col>
     </div>
   </div>
   <el-menu style="height: 10px" mode="horizontal">
   </el-menu>
   <div class="line"></div>
   <div style="width: 200px;float: left;border: 1px solid yellow">
     <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
       <el-radio-button :label="false">展开</el-radio-button>
       <el-radio-button :label="true">收起</el-radio-button>
     </el-radio-group>
     <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
       <el-submenu index="1">
         <template slot="title">
           <i class="el-icon-location"></i>
           <span slot="title">菜单管理</span>
         </template>
         <el-menu-item-group>
           <el-menu-item index="1-1" @click="addTab(editableTabsValue,'后台菜单','http://localhost:8080/#/test',1)">后台菜单</el-menu-item>
           <el-menu-item index="1-2" @click="addTab(editableTabsValue,'前台菜单','http://localhost:8080/#/test2',2)">前台菜单</el-menu-item>
         </el-menu-item-group>
       </el-submenu>
       <el-submenu index="2">
         <template slot="title">
           <i class="el-icon-menu"></i>
           <span slot="title">内容管理</span>
         </template>
         <el-menu-item-group>
           <el-menu-item index="2-1" @click="addTab(editableTabsValue,'文章管理','http://localhost:8080/#/test4',3)">文章管理</el-menu-item>
           <el-menu-item index="2-2" @click="addTab(editableTabsValue,'单页管理','http://localhost:8080/#/test3',4)">单页管理</el-menu-item>
         </el-menu-item-group>
       </el-submenu>
       <!--<el-menu-item index="2">
         <i class="el-icon-menu"></i>
         <span slot="title">内容管理</span>
       </el-menu-item>
       <el-menu-item index="3" disabled>
         <i class="el-icon-document"></i>
         <span slot="title">导航三</span>
       </el-menu-item>
       <el-menu-item index="4">
         <i class="el-icon-setting"></i>
         <span slot="title">导航四</span>
       </el-menu-item>-->
     </el-menu>
   </div>
   <div style="margin-left:210px;width:84%;height: 100%;border: 1px solid black" align="center">
     <div style="border: 1px solid #F00">
       <el-tabs v-model="editableTabsValue" @tab-click="clickTab(editableTabsValue)" type="card" closable @tab-remove="removeTab">
         <el-tab-pane
           v-for="(item, index) in editableTabs"
           :key="item.name"
           :label="item.title"
           :name="item.name"
         >
         </el-tab-pane>
       </el-tabs>
     </div>
     <div style="">
      <iframe  :src="src" id="mobsf"  frameborder="1" style="position:absolute;left: 220px;width: 100%;height: 100%"></iframe>
     </div>
   </div>
 </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      circleUrl: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
      isCollapse: true,
      editableTabsValue: '0',//标签数量
      editableTabs: [],//标签集合
      tabIndex: 0,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      src:''
    };
  },
  mounted:function(){

    },
  methods: {
    //添加标签
    addTab(targetName,title,src,count) {
      for (var i=0;i<this.editableTabs.length;i++){
          if(this.editableTabs[i].title==title){
            this.editableTabsValue=count+"";
            //alert(" tabIndex: "+this.tabIndex);
            this.src=src;
            return;
          }
      }
      let newTabName = count + '';
    //  alert("newTabName: "+newTabName+" tabIndex: "+this.tabIndex);
      //alert(this.tabIndex);
      this.editableTabs.push({
        title: title,
        name: newTabName,
        src:src
      });
      this.src=src;
      this.editableTabsValue = newTabName;
    },
    //删除标签
    removeTab(targetName) {
      //alert(1);
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }

      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter(tab => tab.name !== targetName);
    },
    clickTab:function (editableTabsValue) {
     // alert(editableTabsValue);
      this.src=this.editableTabs[editableTabsValue-1].src;
    }


  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  body{margin:0; padding:0;height: 100%;width: 100%;}
</style>

标签：src,vue,name,tabs,巨丑,editableTabsValue,editableTabs,targetName
来源： https://www.cnblogs.com/tysl/p/11728840.html