devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

elementuiDemo1.1_elementui展示路径

作者：不正经 | 2024-03-24 05:05:30

赞

踩

elementui展示路径

1.1版本 ，大概完成浏览器的整体适配， tab的增删，选中
处理中心
item，的新增。动态获取名称 src路径。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

JS

let vue = new Vue({
	el: "#main",
	data: {
		/* tab */
		editableTabsValue: '1',
		/* 默认选中，如果有新增则会默认选中新增，有删除会默认选中下一个*/
		editableTabs: [{
			title: '首页',
			name: '1',
			/* tab默认显示一个页面 */
			content: 'demo1.html'
		}],

		/* tab现存页面数 */
		tabIndex: 1,
	},
	methods: {
		/* left 左侧导航栏item 被单击 添加tab */
		handleSelect(key, keyPath) {
			// 因为index 不会渲染在页面上， 所以根据id获取 ifrem的值
			/*---------------为保证能正确打开，需要，index 和 id属性为一样  */
			let dom = $("#" + key);
			let iframesrc = $(dom).attr("iframesrc");
			//根据id获取名称
			let name = dom.html();
			//添加一个选项卡
			if (iframesrc != undefined && name != undefined) {
				addTab(name, iframesrc);
			}
		},

		/* 删除tabl */
		removeTab(targetName) {
			MyremoveTab(targetName);
		}
	}
});




/* 添加 一个tab */
function addTab(name, src) {
	let flag = ifTab(name);
	/* 如果已经有打开相同的标签页，则不新增*/
	if (!flag) {
		/* 选项卡索引，新增，删除会用到 */
		let newTabName = ++vue.tabIndex + '';
		vue.editableTabs.push({
			title: name,
			name: newTabName,
			content: src
		});
		vue.editableTabsValue = newTabName;
	}

}
/* 删除tabl */
function MyremoveTab(targetName) {
	let tabs = vue.editableTabs;
	let activeName = vue.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;
				}
			}
		});
	}
	vue.editableTabsValue = activeName;
	vue.editableTabs = tabs.filter(tab => tab.name !== targetName);
}
/* 如果已经有打开的，则返回true 否则返回false */
function ifTab(title) {
	let Tabs = vue.editableTabs;
	for (let i = 0; i < Tabs.length; i++) {
		if (title == Tabs[i].title) {
			vue.editableTabsValue = (i + 1) + '';
			return true;
		}
	}
	return false;
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/Vue.jsv2.6.12.js" type="text/javascript" charset="utf-8"></script>
		<script src="element-ui/lib/index.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="element-ui/lib/theme-chalk/index.css" />

		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<el-container id="main">

			<!----- top----  -->
			<el-header id="header">

				<el-menu class="headerMenu" mode="horizontal" @select="handleSelect" background-color="#7593ba"
					text-color="#fff" active-text-color="#ffd04b">
					<el-menu-item index="dingdan1" id="dingdan1" iframesrc="404">处理中心</el-menu-item>
					<el-menu-item index="dingdan2" id="dingdan2" iframesrc="404">消息中心</el-menu-item>
					<el-menu-item index="dingdan3" id="dingdan3" iframesrc="404">订单管理</a></el-menu-item>
				</el-menu>
				

			</el-header>


			<!-- center -->
			<el-container>
				<!-- body-left  -->
				<el-aside width="170px">

					<el-menu unique-opened class="el-menu-vertical-demo" @select="handleSelect"
						background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">

						<el-submenu index="1">
							<template #title>
								<i class="el-icon-s-custom"></i>
								<span>人员管理</span>
							</template>
							<el-menu-item index="rygl1-1" id="rygl1" iframesrc="silence.html">人员管理</el-menu-item>
						</el-submenu>


						<el-submenu index="2">
							<template #title>
								<i class="el-icon-s-data"></i>
								<span>排行榜单</span>
							</template>
							<el-menu-item index="phbd2-1" id="phbd2-1" iframesrc="silence.html">个人排行</el-menu-item>
							<el-menu-item index="phbd2-2" id="phbd2-2" iframesrc="silence.html">小组排行</el-menu-item>
							<el-menu-item index="phbd2-3" id="phbd2-3" iframesrc="silence.html">个人次数</el-menu-item>
							<el-menu-item index="phbd2-4" id="phbd2-4" iframesrc="silence.html">小组次数</el-menu-item>
						</el-submenu>

						<el-submenu index="3">
							<template #title>
								<i class="el-icon-s-custom"></i>
								<span>账号管理</span>
							</template>
							<el-menu-item index="zhgl3-1" id="zhgl3-1" iframesrc="silence.html">账号新增</el-menu-item>
							<el-menu-item index="zhgl3-2" id="zhgl3-2" iframesrc="silence.html">账号日志</el-menu-item>
						</el-submenu>

						<el-submenu index="4">
							<template #title>
								<i class="el-icon-s-tools"></i>
								<span>权限管理</span>
							</template>
							<el-menu-item index="qxgl4-1" id="qxgl4-1" iframesrc="silence.html">添加权限</el-menu-item>
							<el-menu-item index="qxgl4-2" id="qxgl4-2" iframesrc="silence.html">删除权限</el-menu-item>
							<el-menu-item index="qxgl4-3" id="qxgl4-3" iframesrc="silence.html">修改权限</el-menu-item>
						</el-submenu>

					</el-menu>

				</el-aside>
				<!-- body-main -->

				<el-main>

					<el-tabs v-model="editableTabsValue" type="border-card" closable @tab-remove="removeTab"
						style="height: 100%;">
						<el-tab-pane v-for="(item, index) in editableTabs" :key="item.name" :label="item.title"
							:name="item.name" style="height: 100%;">

							<iframe v-bind:src="item.content" frameborder="false"
								style="width: 100%;height:100%"></iframe>

						</el-tab-pane>
					</el-tabs>

				</el-main>
			</el-container>
		</el-container>
	</body>
	<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
</html>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101

CSS

/* 去掉body自带的外边距 */
body{
	margin: 0;
}
/* 去掉顶部导航条内边距 */
.el-header {
	padding: 0;
	width: 100%;
}

/* 顶部导航栏的居右显示 */
.headerMenu {
	display: flex;
	flex-direction: row-reverse;
}

/* left  左侧 动态计算高度 */
.el-menu-vertical-demo {
	height: calc(100vh - 60px);
}

/* 左侧菜单选中的适配问题 不会出现横向滚动条 */
.el-submenu .el-menu-item {
	min-width: 100%
}


/* main 主体 */
.el-main {
	padding: 0;
}
.el-tabs--border-card>.el-tabs__content {
	padding: 0;
}

/* main主体适配左侧撑起的高度问题 */
.el-tabs__content {
	height: 100%;
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/300044
推荐阅读