微网站建设 上海,网页制作作业100例,网址导航大全,南宁做棋牌网站的公司1.1版本 #xff0c;大概完成浏览器的整体适配#xff0c; tab的增删#xff0c;选中 处理中心 item#xff0c;的新增。动态获取名称 src路径。 JS
let vue new Vue({el: #main,data: {/* tab */editableTabsValue: 1,/* 默认选中#xff0c;如果有新增则会…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
htmlheadmeta charsetutf-8title/titlescript srcjs/Vue.jsv2.6.12.js typetext/javascript charsetutf-8/scriptscript srcelement-ui/lib/index.js typetext/javascript charsetutf-8/scriptlink relstylesheet typetext/css hrefelement-ui/lib/theme-chalk/index.css /link relstylesheet typetext/css hrefcss/main.css /script srcjs/jquery-3.6.0.min.js typetext/javascript charsetutf-8/script/headbodyel-container idmain!----- top---- --el-header idheaderel-menu classheaderMenu modehorizontal selecthandleSelect background-color#7593batext-color#fff active-text-color#ffd04bel-menu-item indexdingdan1 iddingdan1 iframesrc404处理中心/el-menu-itemel-menu-item indexdingdan2 iddingdan2 iframesrc404消息中心/el-menu-itemel-menu-item indexdingdan3 iddingdan3 iframesrc404订单管理/a/el-menu-item/el-menu/el-header!-- center --el-container!-- body-left --el-aside width170pxel-menu unique-opened classel-menu-vertical-demo selecthandleSelectbackground-color#545c64 text-color#fff active-text-color#ffd04bel-submenu index1template #titlei classel-icon-s-custom/ispan人员管理/span/templateel-menu-item indexrygl1-1 idrygl1 iframesrcsilence.html人员管理/el-menu-item/el-submenuel-submenu index2template #titlei classel-icon-s-data/ispan排行榜单/span/templateel-menu-item indexphbd2-1 idphbd2-1 iframesrcsilence.html个人排行/el-menu-itemel-menu-item indexphbd2-2 idphbd2-2 iframesrcsilence.html小组排行/el-menu-itemel-menu-item indexphbd2-3 idphbd2-3 iframesrcsilence.html个人次数/el-menu-itemel-menu-item indexphbd2-4 idphbd2-4 iframesrcsilence.html小组次数/el-menu-item/el-submenuel-submenu index3template #titlei classel-icon-s-custom/ispan账号管理/span/templateel-menu-item indexzhgl3-1 idzhgl3-1 iframesrcsilence.html账号新增/el-menu-itemel-menu-item indexzhgl3-2 idzhgl3-2 iframesrcsilence.html账号日志/el-menu-item/el-submenuel-submenu index4template #titlei classel-icon-s-tools/ispan权限管理/span/templateel-menu-item indexqxgl4-1 idqxgl4-1 iframesrcsilence.html添加权限/el-menu-itemel-menu-item indexqxgl4-2 idqxgl4-2 iframesrcsilence.html删除权限/el-menu-itemel-menu-item indexqxgl4-3 idqxgl4-3 iframesrcsilence.html修改权限/el-menu-item/el-submenu/el-menu/el-aside!-- body-main --el-mainel-tabs v-modeleditableTabsValue typeborder-card closable tab-removeremoveTabstyleheight: 100%;el-tab-pane v-for(item, index) in editableTabs :keyitem.name :labelitem.title:nameitem.name styleheight: 100%;iframe v-bind:srcitem.content frameborderfalsestylewidth: 100%;height:100%/iframe/el-tab-pane/el-tabs/el-main/el-container/el-container/bodyscript srcjs/main.js typetext/javascript charsetutf-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%;
}
