npm install vx-easyui --save
import 'vx-easyui/dist/themes/default/easyui.css';
import 'vx-easyui/dist/themes/icon.css';
import 'vx-easyui/dist/themes/vue.css';
import EasyUI from 'vx-easyui';
Vue.use(EasyUI);
npm install font-awesome --save
npm install [email protected] --save
<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',height:setHeight+'px'}" >
<div v-if="!collapsed" class="sidebar-user">
個人控制面板
</div>
<SideMenu :data="menus" :border="false" :collapsed="collapsed" @itemClick="addTopMenus($event)"></SideMenu>
</div>
<div class="main-body f-full" >
<Tabs ref="tabs" :scrollable="true" :border="false" @tabClose ="onTabClose($event)" @contextmenu.prevent.native="rightClick($event)">
<TabPanel v-for="(item, index) in tabsItem"
:key="index"
:title="item.text"
:closable="item.closable"
:ref="item.ref">
<component :is="item.content"></component>
</TabPanel>
</Tabs>
<Menu :inline="false" :noline="false" menuCls="mymenu" ref="myMenu">
<MenuItem value="new" text="New"></MenuItem>
<MenuItem value="save" text="Save" iconCls="icon-save"></MenuItem>
<MenuItem value="print" text="Print" iconCls="icon-print" :disabled="true"></MenuItem>
<MenuSep></MenuSep>
<MenuItem value="exit" text="Exit"></MenuItem>
</Menu>
</div>
</div>
</div>
</div>
</template>
<script>
import welcome from '@/components/Welcome/index'
import sideMenu from '@/components/json/menus.json'
export default {
data() {
return {
title: '零點商城系統',
width: 200,
collapsed: false,
selectedMenu: null,
closePanel: null,
showMenu:false,
tabsItem: [ {
"id": '1',
"text": '首頁',
"iconCls": "fa fa-home fa-fw",
"closable": false,
"ref": 'tabs',
"content": welcome
}],
currentIndex:0,
menus: sideMenu.data
};
},
computed: {
setHeight() {
return (document.documentElement.clientHeight || document.body.clientHeight) - 65
}
},
methods: {
toggle() {
this.collapsed = !this.collapsed;
this.width = this.collapsed ? 50 : 200;
},
onItemClick(item) {
this.selectedMenu = item;
},
addTopMenus(menu) {
// console.log(menu.path)
let topMenus = this.tabsItem;
if (topMenus.length < 1) {
this.currentIndex++;
topMenus.push({
"id": menu.id,
"text": menu.text,
"closable": menu.closable==1?true:false,
"index": this.currentIndex,
"ref": "tab" + this.currentIndex,
"content": () => import('../admin/' +menu.path+'.vue')
});
this.$nextTick(() => { this.$refs.tabs.select(this.currentIndex); })
} else
{
var find = false;
var Selectindex = 0;
for (var i in topMenus) {
var id = topMenus[i].id;
if (menu.id == id) {
Selectindex = topMenus[i].index;
find = true;
break;
}
}
if (!find) {
this.currentIndex++;
topMenus.push({
"id": menu.id,
"text": menu.text,
"closable": menu.closable==1?true:false,
"index": this.currentIndex,
"ref": "tab" + this.currentIndex,
"content": () => import('../admin/' +menu.path+'.vue')
});
this.$nextTick(() => { this.$refs.tabs.select(this.currentIndex);})
} else {
this.$nextTick(() => {this.$refs.tabs.select(Selectindex);})
}
}
},
onTabClose (panel) {
this.tabsItem = this.tabsItem.filter(p => p.text !== panel.title);
},
rightClick(e){
console.log(e)
e.preventDefault();
// this.$refs.myMenu.inline=true;
// this.$refs.myMenu.noline=true;
this.$refs.myMenu.show({top: e.pageY,left:e.pageX});
},
}
};
</script>