elementuiDemo1.1
生活随笔
收集整理的這篇文章主要介紹了
elementuiDemo1.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%; }總結
以上是生活随笔為你收集整理的elementuiDemo1.1的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql外键教程_关于MySQL外键的
- 下一篇： 余额宝的规模跌破1万亿，四年来首次！为什