Element UI 是一套采用 Vue 2.0 作為基礎框架實現的組件庫，它面向企業級的后臺應用，能夠幫助你快速地搭建網站，極大地減少研發的人力與時間成本。今天我就把實際運用中的布局跟大家說一下，希望對大家有用。今天我主要講的是登錄后的布局界面，原來我們都是用frameset布局，現在我們要用Element看看如何實現。
界面截圖
這種布局用frameset可以這么寫：
<frameset rows="100,*" cols="*" scrolling="No" framespacing="0" frameborder="no" border="0">
<frame src="inc/head.html" name="headmenu" id="mainFrame" title="mainFrame"><!-- 引用頭部 -->
<!-- 引用左邊和主體部分 -->
<frameset rows="100*" cols="220,*" scrolling="No" framespacing="0" frameborder="no" border="0">
<frame src="inc/left.html" name="leftmenu" id="mainFrame" title="mainFrame">
<frame src="main.html" name="main" scrolling="yes" noresize="noresize" id="rightFrame" title="rightFrame">
</frameset>
</frameset>
那么我們如何用Element來寫呢，具體步驟如下。
一、創建項目
這個就不用說了，我把我自己的項目結構貼出來。
項目結構
二、創建頁眉、左側、右側文件
首先，我們創建頭部、左邊、右邊文件，我們他們都創建在src-->components文件夾下，具體如下：
<!--頭部（Header.vue）-->
<template>
<div>
<div class="topbar-logo topbar-btn">
<a href="/"></a>
</div>
<div class="topbar-title topbar-btn">
<span>后臺管理系統</span>
</div>
<div class="topbar-account topbar-btn">
<el-dropdown trigger="click">
<span class="el-dropdown-link userinfo-inner"><i class="iconfont icon-user"></i> {{sysUserName}} <i class="iconfont icon-down"></i></span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="userinfo">個人信息</el-dropdown-item>
<el-dropdown-item @click.native="editpwd">修改密碼</el-dropdown-item>
<el-dropdown-item divided @click.native="logout">退出登錄</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</template>
<script type="text/ecmascript-6">
export default {
data() {
return {
sysUserName: '',
sysUserAvatar: '',
collapsed: false,
}
},
mounted() {
var userSession = this.getCookie('session');
if(userSession) {
this.sysUserName = userSession || '';
}
},
methods: {
//退出
logout() {
this.$confirm('確認要退出嗎？','提示',{}).then(() => {
this.$fetch('m/logout').then((res) =>{
if(res.errCode == 200) {
this.delCookie('session');
this.delCookie('u_uuid');
this.$router.push({path: '/', query: {redirect: this.$router.currentRoute.fullPath}});
} else {
console.log(res.errMsg);
}
});
}).catch(() => {
});
},
//個人信息
userinfo() {
this.$router.push('/userinfo');
},
//修改密碼
editpwd() {
this.$router.push('/editpwd');
}
}
}
</script>
標簽具體是什么意思，我就不解釋了，大家可以看看Element官網（http://element.eleme.io/#/）
<!--左邊（UserLeft.vue）-->
<template>
<div>
<aside :class="collapsed?'menu-collapsed' : 'menu-expanded'">
<!--展開折疊開關-->
<div class="menu-toggle" @click.prevent="collapse">
<i class="iconfont icon-menufold" v-show="!collapsed"></i>
<i class="iconfont icon-menuunfold" v-show="collapsed"></i>
</div>
<!--菜單展開時的顯示情況-->
<el-menu v-show="!collapsed" default-active="0" @open="handleOpen" @close="handleClose" router>
<template v-for="(item,index) in $router.options.routes" v-if="item.menuShow">
<el-submenu v-if="!item.leaf" :index="index+''">
<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
<el-menu-item v-for="term in item.children" :key="term.path" :index="term.path" v-if="term.menuShow">
{{term.name}}
</el-menu-item>
</el-submenu>
<el-menu-item v-else-if="item.leaf&&item.children&&item.children.length" :index="item.children[0].path" class="el-submenu__title">
<i :class="item.iconCls"></i>{{item.children[0].name}}
</el-menu-item>
</template>
</el-menu>
<!--菜單折疊后的顯示情況
這里需要說明一下： $router.options.routes，其實就是從路由獲取菜單數據，具體往下面看。這是重點，要不然你都不知道數據從哪里過來的。其實這里的數據可以做到數據庫中，然后直接從數據庫中獲取。
-->
<ul v-show="collapsed" class="el-menu collapsed" ref="menuCollapsed" >
<template v-for="(item,index) in $router.options.routes" v-if="item.menuShow">
<li v-if="!item.leaf" :index="index+''" style="position: relative;">
<div class="el-submenu__title" style="padding-left: 20px;" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)"><i :class="item.iconCls"></i></div>
<ul class="el-menu submenu" :class="'submenu-hook-'+index" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)">
<li v-for="term in item.children" :key="term.path" v-if="term.menuShow" class="el-menu-item" style="padding-left: 40px;" :class="$route.path==term.path?'is-active':''"
@click="$router.push(term.path)">{{term.name}}</li>
</ul>
</li>
<li v-else-if="item.leaf&&item.children&&item.children.length" class="el-menu-item el-submenu__title" :class="$route.path==item.children[0].path?'is-active':''" @click="$router.push(item.children[0].path)">
<i :class="item.iconCls"></i>
</li>
</template>
</ul>
</aside>
</div>
</template>
<script>
export default {
data() {
return {
sysUserName: '',
sysUserAvatar: '',
collapsed: false
}
},
mounted() {
//初始化
},
methods: {
handleOpen() {
},
handleClose() {
},
//折疊導航欄
collapse: function () {
this.collapsed = !this.collapsed;
},
showMenu(i, status){
this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-' + i)[0].style.display = status ? 'block' : 'none';
}
}
}
</script>
<!-- 右邊（UserRight.vue）這是初始化的頁面，大家可以根據自己的需求來寫 -->
<template>
<div>
<el-row class="warp">
<el-col :span="24" class="warp-breadcrum">
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{path:'/'}"><b>首頁</b></el-breadcrumb-item>
</el-breadcrumb>
</el-col>
<el-col :span="24" class="warp-main">
<section class="chart-container">
<el-row>
<el-col :span="3">
<el-card>
<div style="padding: 14px;">
<span>公司LOGO</span>
<div class="bottom clearfix">
<time class="time">{{currentDate | formatDate(1)}}</time>
</div>
</div>
</el-card>
</el-col>
</el-row>
</section>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
currentDate: new Date(),
}
}
}
</script>
三、創建路由文件
<!--打開路由文件復制如下代碼 -->
import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/views/index/Index' //首頁
import Home from '@/views/index/Home' //主頁
import right from '@/components/UserRight' //右側
import userlist from '@/views/user/UserList' //用戶列表
import usercert from '@/views/user/Certification' //用戶審核
import userlook from '@/views/user/UserLook' //用戶查看
import usercertlook from '@/views/user/UserCertLook' //用戶審核查看
import sellbill from '@/views/ticket/SellBill' //賣票信息
import buybill from '@/views/ticket/BuyBill' //買票信息
import changebill from '@/views/ticket/ChangeBill' //換票信息
import billlist from '@/views/bill/list' //票據列表
import billinfo from '@/views/bill/info' //票據詳細
import addbill from '@/views/bill/add' //添加票據
import editsellbill from '@/views/ticket/EditSellBill' //修改賣票信息
import editbuybill from '@/views/ticket/EditBuyBill' //修改買票信息
import editchangebill from '@/views/ticket/EditChangeBill' //修改換票信息
import lookbill from '@/views/ticket/LookBill' //查看詳細
import lookbuybill from '@/views/ticket/LookBuyBill' //查看買票詳細
import ticketstatus from '@/views/ticket/TicketStatus' //票據狀態
import addticket from '@/views/ticket/AddTicket' //新建開票信息
import userinfo from '@/views/user/UserInfo' //個人信息
import editpwd from '@/views/user/EditPwd' //修改密碼
import webbasic from '@/views/user/WebBasic' //網站基本配置
/* 圖片管理 */
import imglist from '@/views/image/ImgList' //圖片列表
import addimg from '@/views/image/AddImg' //圖片添加
import editimg from '@/views/image/EditImg' //圖片編輯
/* 新聞信息 */
import newtype from '@/views/newstype/TypeList' //新聞分類
import addnewstype from '@/views/newstype/AddType' //添加新聞分類
import editnewstype from '@/views/newstype/EditType' //編輯新聞分類
import newlist from '@/views/news/NewsList' //新聞列表
import addnews from '@/views/news/AddNews' //添加新聞
import editnews from '@/views/news/EditNews' //編輯新聞
import looknews from '@/views/news/LookNews' //查看新聞
/* 幫助中心 */
import addhelp from '@/views/help/AddHelp' //添加幫助
import helplist from '@/views/help/HelpList' //幫助列表
import edithelp from '@/views/help/EditHelp' //幫助修改
import lookhelp from '@/views/help/LookHelp' //幫助查看
import industry from '@/views/help/Industry' //行業解決方案
import security from '@/views/help/Security' //安全保障
/* 友情鏈接*/
import linklist from '@/views/link/LinkList' //友情鏈接列表
import addlink from '@/views/link/AddLink' //添加友情鏈接
import editlink from '@/views/link/EidtLink' //編輯友情鏈接
/* 關于我們 */
import addabout from '@/views/aboutus/AddAbout' //添加關于我們
import aboutlist from '@/views/aboutus/AboutList' //添加關于我們
import lookabout from '@/views/aboutus/LookAbout' //查看關于我們
import editabout from '@/views/aboutus/EditAbout' //編輯關于我們
Vue.use(Router);
<!--
以下就是導航菜單，也就是前面我們看到。下面我解釋以下相關參數：
path:路徑，默認為："/",
name:標題
compnent:組件，
redirect：跳轉頁面
menuShow：true or false;控制左側菜單顯示還是隱藏
iconCls：圖標樣式
children：子模塊，這里表示主菜單下面掛載多個子菜單
meta:{requireAuth: true }，主要做登錄判斷，具體的實現方式在下面的頁面路由驗證
-->
const routes = [
{
path: '/',
name:'登錄',
component:Index
},
{
path: '/',
name: 'home',
component: Home,
redirect: '/home',
leaf: true, //只有一個節點
menuShow: true,
iconCls: 'iconfont icon-home', //圖標樣式
children: [
{path:'/home', component: right, name: '首頁', menuShow: true, meta:{requireAuth: true }}
]
},
{
path: '/',
component: Home,
name: '用戶管理',
menuShow: true,
iconCls: 'iconfont icon-users',
children: [
{path: '/userlist', component: userlist, name: '用戶列表', menuShow: true, meta:{requireAuth: true }},
{path: '/usercert', component: usercert, name: '用戶認證審核', menuShow: true, meta:{requireAuth: true }},
{path: '/userlook', component: userlook, name: '查看用戶信息', menuShow: false,meta:{requireAuth: true}},
{path: '/usercertlook', component: usercertlook, name: '用戶審核信息', menuShow: false,meta:{requireAuth: true}},
]
},
{
path: '/',
component: Home,
name: '信息管理',
menuShow: true,
iconCls: 'iconfont icon-books',
children: [
{path: '/sellbill', component: sellbill, name: '賣票信息', menuShow: true, meta:{requireAuth: true }},
{path: '/buybill', component: buybill, name: '買票信息', menuShow: true, meta:{requireAuth: true }},
{path: '/changebill', component: changebill, name: '換票信息', menuShow: true, meta:{requireAuth: true }},
{path: '/bill/editsellbill', component: editsellbill, name: '編輯賣票信息', menuShow: false, meta:{requireAuth: true}},
{path: '/bill/editbuybill', component: editbuybill, name: '編輯買票信息', menuShow: false, meta:{requireAuth: true}},
{path: '/bill/editchangebill', component: editchangebill, name: '編輯換票信息', menuShow: false, meta:{requireAuth: true}},
{path: '/bill/lookbill', component: lookbill, name: '查看票據信息', menuShow: false, meta:{requireAuth: true}},
{path: '/bill/lookbuybill', component: lookbuybill, name: '查看買票信息', menuShow: false, meta:{requireAuth: true}}
]
},
{
path: '/bill',
component: Home,
name: '票據管理',
menuShow: true,
iconCls: 'iconfont icon-books',
children: [
{path: '/bill/list', component: billlist,name: '已開票據列表', menuShow: true, meta:{requireAuth: true }},
{path: '/bill/info', component: billinfo,name: '票據詳細頁', menuShow: false, meta:{requireAuth: true }},
{path: '/bill/add', component: addbill, name: '新建開票信息', menuShow: true, meta:{requireAuth: true }},
{path: '/bill/update', component: addbill, name: '修改票據信息', menuShow: false, meta:{requireAuth: true }}
]
},
{
path: '/',
component: Home,
name: '資訊管理',
menuShow: true,
iconCls: 'iconfont icon-books2',
children: [
{path: '/newtype/newtype', component: newtype, name: '資訊分類', menuShow: true, meta:{requireAuth: true}},
{path: '/newtype/addnewstype', component: addnewstype, name: '添加資訊分類', menuShow: false, meta:{requireAuth: true}},
{path: '/newtype/editnewstype', component: editnewstype, name: '編輯資訊分類', menuShow: false, meta:{requireAuth: true}},
{path: '/new/newlist', component: newlist, name: '資訊列表', menuShow: true, meta:{requireAuth: true}},
{path: '/new/addnews', component: addnews, name: '添加新聞', menuShow: false, meta:{requireAuth: true}},
{path: '/new/editnews', component: editnews, name: '編輯新聞', menuShow: false, meta:{requireAuth: true}},
{path: '/new/looknews', component: looknews, name: '查看新聞', menuShow: false, meta:{requireAuth: true}}
]
},
{
path: '/',
component: Home,
name: '關于我們',
menuShow: true,
iconCls: 'iconfont icon-books1',
children: [
{path: '/aboutus/addabout', component: addabout, name: '添加關于我們', menuShow: true, meta:{requireAuth: true}},
{path: '/aboutus/aboutlist', component: aboutlist, name: '關于我們', menuShow: true, meta:{requireAuth: true}},
{path: '/aboutus/lookabout', component: lookabout, name: '查看關于我們', menuShow: false, meta:{requireAuth: true}},
{path: '/aboutus/editabout', component: editabout, name: '編輯關于我們', menuShow: false, meta:{requireAuth: true}}
]
},
{
path: '/',
component: Home,
name: '幫助管理',
menuShow: true,
iconCls: 'iconfont icon-books2',
children: [
{path: '/help/addhelp', component: addhelp, name: '添加幫助', menuShow: true, meta:{requireAuth: true}},
{path: '/help/helplist', component: helplist, name: '幫助中心', menuShow: true, meta:{requireAuth: true}},
{path: '/help/edithelp', component: edithelp, name: '編輯幫助信息', menuShow: false, meta:{requireAuth: true}},
{path: '/help/lookhelp', component: lookhelp, name: '查看幫助信息', menuShow: false, meta:{requireAuth: true}}
]
},
{
path: '/',
component: Home,
name: '圖片管理',
menuShow: true,
iconCls: 'iconfont icon-setting1',
children: [
{path: '/img/addimg', component: addimg, name: '添加圖片', menuShow: true, meta:{requireAuth: true }},
{path: '/img/imglist', component: imglist, name: '圖片管理', menuShow: true, meta:{requireAuth: true }},
{path: '/img/editimg', component: editimg, name: '編輯圖片', menuShow: false, meta:{requireAuth: true }}
]
},
{
path: '/',
component: Home,
name: '友情鏈接',
menuShow: true,
iconCls: 'iconfont icon-setting1',
children: [
{path: '/link/addlink', component: addlink, name: '添加友情鏈接', menuShow: true, meta:{requireAuth: true }},
{path: '/link/linklist', component: linklist, name: '友情鏈接管理', menuShow: true, meta:{requireAuth: true }},
{path: '/link/editlink', component: editlink, name: '編輯友情鏈接', menuShow: false, meta:{requireAuth: true }}
]
},
{
path: '/',
component: Home,
name: '系統設置',
menuShow: true,
iconCls: 'iconfont icon-setting1',
children: [
{path: '/userinfo', component: userinfo, name: '個人信息', menuShow: true, meta:{requireAuth: true }},
{path: '/editpwd', component: editpwd, name: '修改密碼', menuShow: true, meta:{requireAuth: true }},
{path: '/webbasic', component: webbasic, name: '基本配置', menuShow: true, meta:{requireAuth: true }},
]
}
];
const router = new Router({
routes
});
<!--這個是請求頁面路由的時候會驗證token存不存在，不存在的話會到登錄頁
這段代碼大家可以根據自己的需求來寫，不一定按照我寫的。
-->
router.beforeEach((to, from, next) => {
if(to.meta.requireAuth) {
fetch('m/is/login').then(res => {
if(res.errCode == 200) {
next();
} else {
if(getCookie('session')) {
delCookie('session');
}
if(getCookie('u_uuid')) {
delCookie('u_uuid');
}
next({
path: '/'
});
}
});
} else {
next();
}
});
export default router;
四、樣式文件
<!--
創建app.css
在 static-->css創建app.css
-->
/*全局 */
body{padding:0; margin:0; background: #333744;}
#app{font-family: "Microsoft Yahei", sans-serif !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;color: #2c3e50;text-align: left;}
/*框架css */
.page{height:100%; background-color: #fff; position:absolute; overflow: hidden; zoom:1; width:100%;}
header{height:8%; background-color: #666;}
.content{height:92%; background-color: #f50; position:absolute; overflow: hidden; zoom:1; width:100%;}
.left{width:200px; height: 100%; background-color: #333744; float:left; overflow: hidden; zoom:1;}
.right{background-color: #fff; height:100%; overflow-y: auto;}
/*自定義css */
.el-text-left{ text-align: left;}
.el-text-right{ text-align: right;}
.el-text-center{ text-align: center;}
.visibilityH{visibility: hidden;}
.el-no-bold{font-weight: normal;}
.el-bold{font-weight: bold;}
/*修改自帶樣式*/
.el-dropdown-menu{font-size:14px; font-family: "Microsoft Yahei", sans-serif; line-height:20px;}
/* 登錄頁 */
.login-container{margin:10pc auto;padding:35px 35px 15px;width:350px;border:1px solid #eaeaea;border-radius:5px;background:#fff;background:-webkit-gradient(linear,0 0,0 100%,from(#b8c4cb),to(#f6f6f8));background:-webkit-gradient(linear,0 0,0 100%,from(#fff),to(#6495ed));background:-webkit-linear-gradient(top,#fff,#6495ed,#fff);background:-o-linear-gradient(top,#fff,#6495ed);background-clip:padding-box;box-shadow:0 0 25px #cac6c6}
.title{margin:0 auto 40px;color:#505458;text-align:center}
.remember{margin:0 0 35px}
.el-menu-item,.el-submenu__title{color:#fff}
.el-submenu__title:hover{background-color:#00c1de}
.el-submenu .el-menu-item{background-color:#333744}
.el-submenu .el-menu-item:hover{background-color:#4a5064}
.el-menu-item.is-active,.el-menu-item.is-active:hover,.el-submenu .el-menu-item.is-active,.el-submenu .el-menu-item.is-active:hover{background-color:#00c1de;color:#fff}
.el-menu .iconfont{margin-right:6px;vertical-align:baseline}
.warp-breadcrum{padding:10px 0;border-bottom:1px solid #efefef}
.warp-main{padding-top:20px}
.container{position:absolute;top:0;bottom:0;width:100%}
.topbar-wrap{padding:0;height:50px;background:#1d8ce0;line-height:50px}
.topbar-btn{color:#fff}
.topbar-btn:hover{background-color:#58b7ff}
.topbar-logo{width:49px;line-height:26px}
.topbar-logo,.topbar-title{float:left;border-right:1px solid #1d8ce0;text-align:center}
.topbar-title{width:129px}
.topbar-account{float:right;padding-right:9pt;font-size:9pt}
.userinfo-inner{padding-left:10px;color:#fff;cursor:pointer}
.main{position:absolute;top:50px;bottom:0;display:flex;overflow:hidden}
aside{width:180px;flex:0 0 180px}
.el-menu{height:100%;border-radius:0;background-color:#333744}
.collapsed{width:50px}
.submenu{position:absolute;top:0;left:50px;z-index:9999;display:none;height:auto}
.menu-collapsed{width:50px;flex:0 0 50px}
.menu-expanded{width:180px;flex:0 0 180px}
.menu-toggle{height:26px;background:#4a5064;color:#fff;text-align:center;line-height:30px}
.content-container{overflow-y:auto;padding:10px;background:#fff;flex:1}
.content-wrapper{box-sizing:border-box;background-color:#fff}
.time{color:#999;font-size:13px}
.bottom{margin-top:13px;line-height:9pt}
/*票據管理 */
.breadcrumb{ border-bottom:1px dotted #dfe6ec; padding-bottom:10px; padding-left:10px;}
.my-el-table .el-table{font-size:12px;}
.right-title{font-size:16px; font-weight: normal; margin-top:15px;}
a.table-right-link{color:rgb(32, 160, 255); text-decoration: none;}
/*票據詳細 */
.my-table{border:1px solid #dfe6ec; margin: 30px auto 0; border-collapse: collapse;}
.my-table .caption{font-size:24px;}
.my-table td{padding:10px 13px; border:1px solid #dfe6ec; font-size:14px;}
.my-table .table-title{background-color: #EFF2F7;}
.bill-images{width:70%; margin:20px auto;}
.right-btn{float: right;}
/*圖片上傳*/
.avatar-uploader .el-upload { border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; }
.avatar-uploader .el-upload:hover {
border-color: #20a0ff;
}
.avatar-uploader-icon {font-size: 28px; color: #8c939d; width: 120px; height: 120px; line-height: 120px; text-align: center; }
.avatar {width: 120px; height: 120px; display: block; }
/*添加票據 */
.my-table .el-input-group__append{position: relative; left:-2px;}
.edit_container{
padding-bottom:10px;
margin-bottom: 40px;
}
.editer{
height: 300px;
}
.submit_btn{
text-align: center;
}
<!--
創建app.css
在 static-->css創建iconfont.css
在iconfont.css里面，你需要下載fonts文件夾，這里面有很多字體，大家可以在官網上下載
-->
@font-face {font-family: "iconfont";
src: url('../fonts/iconfont.eot?t=1492137439402'); /* IE9*/
src: url('../fonts/iconfont.eot?t=1492137439402#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/iconfont.woff?t=1492137439402') format('woff'), /* chrome, firefox */
url('../fonts/iconfont.ttf?t=1492137439402') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('../fonts/iconfont.svg?t=1492137439402#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-user:before { content: "\e600"; }
.icon-home1:before { content: "\e635"; }
.icon-home:before { content: "\e6a1"; }
.icon-setting1:before { content: "\e601"; }
.icon-setting:before { content: "\e664"; }
.icon-down:before { content: "\e623"; }
.icon-books1:before { content: "\e67f"; }
.icon-leaf:before { content: "\e645"; }
.icon-users1:before { content: "\e65a"; }
.icon-menuunfold:before { content: "\eacc"; }
.icon-menufold:before { content: "\eacd"; }
.icon-books:before { content: "\e605"; }
.icon-users:before { content: "\e883"; }
.icon-books2:before { content: "\e7b9"; }
樣式目錄結構
App.vue文件
main.js文件需要加入的內容
以上就是全部代碼，謝謝大家，歡迎大牛拍磚。(o)/~為了更好的服務大家，請加入我們的技術交流群：（511387930），同時您也可以掃描下方的二維碼關注我們的公眾號，每天我們都會分享經驗，謝謝大家。
