<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>

巨丑vue的更多相关文章

  1. 去除IE10+上文本框巨丑无比的删除图标以及显示密码图标

    去除IE10+上文本框巨丑无比的删除图标以及显示密码图标 IE浏览器总是让人喜欢让人厌,在最新的IE浏览器(IE10+)上使用表单时,文本框内后面会出现很巨丑无比的“删除图标”以及“显示密码图标”,如 ...

  2. 牢骚 - 你代码写得丑,又不肯用好一点的IDE,这让我很为难啊。

    又有人问我代码错误,发过来就是一篇巨丑无比的代码,先不说左大括号转行还和代码写在同一行的谭浩强风格,你这狗啃的一样的缩进是闹哪样!粘进VS2015里面,自动格式化,瞬间赏心悦目,编译错误出了5行,我直 ...

  3. vue-router的hash模式与history模式的对比

    Vue-router 中hash模式和history模式的关系在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的mode:&quo ...

  4. Vue-router 中hash模式和history模式的区别

    实际上存在三种模式: Hash: 使用URL的hash值来作为路由.支持所有浏览器. History: 以来HTML5 History API 和服务器配置.参考官网中HTML5 History模式 ...

  5. H5坦克大战之【画出坦克】

    今天是个特殊的日子,圣诞节,也是周末,在这里先祝大家圣诞快乐!喜庆的日子,我们可以稍微放松一下,扯一扯昨天雷霆对战凯尔特人的比赛,这场比赛大威少又双叒叕拿下三双,而且是一个45+11+11的超级三双, ...

  6. 东哥读书小记 之 《MacTalk人生元编程》

         一直以来的自我感觉:自己是个记性偏弱的人.反正从小读书就喜欢做笔记(可自己的字写得巨丑无比,尼玛不科学呀),抄书这事儿真的就常发生俺的身上. 因为那时经常要背诵课文之类,反正为了怕自己忘记, ...

  7. 综合实战--文件上传系统【JDBC&IO&Socket】

    本文纯属记录第一次实战遇到的坑和知识,如果后边有时间再做整理. 1,先写了个操作数据库的工具类SqlTool,照着JDBC资料打完之后,测试的时候出错了,java.lang.ClassNotFound ...

  8. 李洪强iOS经典面试题140-UI

    李洪强iOS经典面试题140-UI   UI viewcontroller的一些方法的说明viewDidLoad,viewWillDisappear, viewWillAppear方法的 顺序和作用? ...

  9. second class

    nothing no very good. 1.look at shuruo.html,after display:inline-block; li's width as the content; S ...

随机推荐

  1. Android 官方下拉刷新 SwipeRefreshLayout

    0.build.gradle compile 'com.android.support:support-v4:23+' 1.布局文件 <android.support.v4.widget.Swi ...

  2. javascript中用&&跟||来简化if{}else{}的写法

    原文:javascript中用&&跟||来简化if{}else{}的写法 目录 javascript中用&&跟||来简化if{}else{}的写法 1. if else ...

  3. vue 通过 name 和 params 进行调整页面传参刷新参数丢失问题&vue路由可选参数

    vue  通过 name 和 params 进行调整页面传参刷新参数丢失问题 router.js: export default new Router({ routes: [ { path: '/', ...

  4. python selenium1 模拟点击 测试对象 58同城验证码

    #!/usr/bin/python# -*- coding: UTF-8 -*-# @Time : 2019/12/5 17:30# @Author : shenghao/10347899@qq.co ...

  5. 【js】null 和 undefined的区别?

    1.首先看一个判断题:null和undefined 是否相等     console.log(null==undefined)//true     console.log(null===undefin ...

  6. Oracle---PL/SQL的学习

    PL/SQL程序 一.定义 declare 说明部分 begin 语句序列(DML语句) exception 例外处理语句 end; 二. 变量和常量说明 a) 说明变量(char,varchar2, ...

  7. 【Log4J】

    学习mybatis中用到了Log4J 在此记录下 引入 引入Maven配置 <!-- https://mvnrepository.com/artifact/log4j/log4j --> ...

  8. 第一章、前端之html

    目录 第一章.前端之html 一. html介绍 第一章.前端之html 一. html介绍 web服务本质 import socket sk = socket.socket() sk.bind((& ...

  9. Djnago模板与标签

    1.模版系统 基本语法 {{ }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 变量 在Django的模板语言中按此语法使用:{{ 变量名 }}. python基础的基本数据类型可以通 ...

  10. [Abp vNext微服务实践] - 前后端分类

    一.前景 abp vNext是ABP 开源 Web应用程序框架,是abp的新一代开源web框架.框架完美的集成.net core.identity server4等开源框架,适用于构建web应用程序和 ...