赚钱网站源码/seo培训一对一

赚钱网站源码,seo培训一对一,西藏城乡住房建设厅网站,安阳1.1版本 ，大概完成浏览器的整体适配， tab的增删，选中处理中心 item，的新增。动态获取名称 src路径。 JS let vue new Vue({el: "#main",data: {/* tab */editableTabsValue: 1,/* 默认选中，如果有新增则会…

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

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>

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%;
}