源代码
<template>
<div>
<div class="f-column">
<div class="main-header f-row">
<div class="f-row f-full">
<div class="main-title f-animate f-row" :style="{width:width+'px'}">
<img class="app-logo" src="https://www.jeasyui.com/favicon.ico">
<span v-if="!collapsed">{{title}}</span>
</div>
<div class="main-bar f-full">
<span class="main-toggle fa fa-bars" @click="toggle()"></span>
</div>
</div>
</div>
<div class="f-row f-full">
<div class="sidebar-body f-animate" :style="{width:width+'px'}">
<div v-if="!collapsed" class="sidebar-user">
User Panel
</div>
<SideMenu :data="menus" :border="false" :collapsed="collapsed" @itemClick="onItemClick($event)"></SideMenu>
</div>
<div class="main-body f-full">
<p v-if="selectedMenu">{{selectedMenu.text}}</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
title: 'AppLayout',
width: 200,
collapsed: false,
selectedMenu: null,
menus: [
{
text: "Forms",
iconCls: "fa fa-wpforms",
state: "open",
children: [
{
text: "Form Element"
},
{
text: "Wizard"
},
{
text: "File Upload"
}
]
},
{
text: "Mail",
iconCls: "fa fa-at",
selected: true,
children: [
{
text: "Inbox"
},
{
text: "Sent"
},
{
text: "Trash",
children: [
{
text: "Item1"
},
{
text: "Item2"
}
]
}
]
},
{
text: "Layout",
iconCls: "fa fa-table",
children: [
{
text: "Panel"
},
{
text: "Accordion"
},
{
text: "Tabs"
}
]
}
]
};
},
methods: {
toggle() {
this.collapsed = !this.collapsed;
this.width = this.collapsed ? 50 : 200;
},
onItemClick(item) {
this.selectedMenu = item;
}
}
};
</script>
<style>
@import "https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
.sidemenu .accordion .panel-title {
color: #b8c7ce;
}
.sidemenu .accordion .accordion-header {
background: #222d32;
color: #b8c7ce;
}
.sidemenu .accordion .accordion-body {
background: #2c3b41;
color: #8aa4af;
}
.sidemenu .accordion .accordion-header-selected {
background: #1e282c;
}
.sidemenu .tree-node-hover {
background: #2c3b41;
color: #fff;
}
.sidemenu .tree-node-selected {
background: #2c3b41;
color: #fff;
}
.sidemenu .accordion-header .panel-tool {
display: none;
}
.sidemenu .accordion-header::after,
.sidemenu .tree-node-nonleaf::after {
display: inline-block;
vertical-align: top;
border-style: solid;
transform: rotate(45deg);
width: 4px;
height: 4px;
content: "";
position: absolute;
right: 10px;
top: 50%;
margin-top: -3px;
border-width: 0 1px 1px 0;
}
.sidemenu .accordion-header-selected::after {
transform: rotate(-135deg);
}
.sidemenu .tree-node-nonleaf::after {
transform: rotate(-135deg);
}
.sidemenu .tree-node-nonleaf-collapsed::after {
transform: rotate(45deg);
}
.sidemenu-collapsed .accordion-header::after {
display: none;
}
.sidemenu-tooltip .accordion {
border-color: #1e282c;
}
html,
body {
margin: 0;
padding: 0;
}
.app-logo {
width: 24px;
height: 24px;
color: #fff;
margin: 13px 10px;
}
.main-header {
background: #3c8dbc;
color: #fff;
line-height: 50px;
height: 50px;
}
.main-title {
background: #367fa9;
font-size: 20px;
text-align: center;
overflow: hidden;
}
.main-bar {
background: #3c8dbc;
}
.main-toggle {
position: relative;
display: inline-block;
width: 16px;
height: 16px;
cursor: pointer;
color: #fff;
margin: 0 10px;
}
.main-body {
background: #ecf0f5;
min-height: 400px;
}
.sidebar-body {
background: #222d32;
}
.sidebar-user {
color: #fff;
padding: 20px;
line-height: 20px;
}
</style>