easyui vue 後臺框架

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>