vue element-ui 搭建侧边栏

Posted 安果移不动

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue element-ui 搭建侧边栏相关的知识,希望对你有一定的参考价值。

样式

 

main.js

import Vue from 'vue'
import App from './App.vue'
//全部引入
// import ElementUI from 'element-ui';
// import 'element-ui/lib/theme-chalk/index.css';
// Vue.use(ElementUI);

//按需引入
import Button, Radio, Select, Container, Aside, Header, Main, Menu, MenuItem, MenuItemGroup, Submenu from 'element-ui';
import router from './router.js'


Vue.component(Select.name, Select);
Vue.component(Radio.name, Radio);
Vue.use(Button)
Vue.use(Container)
Vue.use(Aside)
Vue.use(Header)
Vue.use(Main)
Vue.use(Menu)
Vue.use(MenuItem)
Vue.use(MenuItemGroup)
Vue.use(Submenu)
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

Vue.config.productionTip = false
new Vue(
    router,
    render: h => h(App),
).$mount('#app')

侧边栏组件
CommonAside.vue

<template>
  <!--    default-active  默认展开项目-->
  <el-menu
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :collapse="isCollapse">
    <h3>通用后台管理系统</h3>
    <el-menu-item :index="item.path" v-for="item in noChildren " :key=item.path @click="clickMenu(item)">
      <i :class="'el-icon-'+item.icon"></i>
      <span slot="title"> item.label </span>
    </el-menu-item>

    <el-submenu :index="item.label" v-for="item in hasChildren" :key=item.path>
      <template slot="title">
        <i :class="'el-icon-'+item.icon"></i>
        <span slot="title"> item.label </span>
      </template>
      <el-menu-item-group>
        <el-menu-item :index="subItem.path" v-for="(subItem,subIndex) in item.children" :key="subIndex"
                      @click="clickMenu(item)">
          <i :class="'el-icon-'+subItem.icon"></i>
          <span slot="title"> subItem.label </span>
        </el-menu-item>
      </el-menu-item-group>

    </el-submenu>
  </el-menu>
</template>

<style lang="scss" scoped>

.el-menu 
  height: 100%;
  border: none;

  h3 
    color: #ffffff;
    text-align: center;
    line-height: 48px;
  


.el-menu-vertical-demo:not(.el-menu--collapse) 
  width: 200px;
  min-height: 400px;


</style>


<script>

export default 
  name: "CommonAside",
  data() 
    return 
      //展开 还是折叠
      isCollapse: false,
      menu: [
        path: "/", name: "home", label: "首页", icon: "s-home", url: "Home/Home",
        path: "/mall", name: "mall", label: "商品管理", icon: "video-play", url: "MallManage/MallManage",
        path: "/user", name: "user", label: "用户管理", icon: "user", url: "UserManage/UserManage",
        
          label: "其他",
          icon: "location",
          children: [
            path: "/page1", name: "page1", label: "页面1", icon: "setting", url: "Other/PageOne",
            path: "/page2", name: "page2", label: "页面2", icon: "setting", url: "Other/PageTwo",
          ]
        ,
      ]
    ;
  ,
  methods: 
    handleOpen(key, keyPath) 
      console.log(key, keyPath);
    ,
    handleClose(key, keyPath) 
      console.log(key, keyPath);
    ,
    clickMenu(item) 
      this.$router.push(name: item.name);
    
  ,
  computed: 
    noChildren() 
      return this.menu.filter((item) => !item.children);
    ,
    hasChildren() 
      return this.menu.filter((item) => item.children);
    
  

</script>

main.vue组装到上面

<template>
  <el-container style="height: 100%">
    <el-aside width="auto">
      <common-aside></common-aside>
    </el-aside>
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
    </el-container>
  </el-container>

</template>

<script>
import CommonAside from '../components/CommonAside.vue'

export default 
  name: "Main",
  components: CommonAside

</script>
<style lang="scss" scoped>


.el-header 
  background: #333;


.el-main 
  padding-top: 0;

</style>

main.vue是通过router.js配置上去的

import Vue from 'vue'
import VueRouter from 'vue-router'
//自定义页面
import Main from './views/Main.vue'
//安装路由到vue
Vue.use(VueRouter)

const routes = [
    path: '/', name: 'Main', component: Main,
    //路由的懒加载
    path: '/about', name: 'About', component: () => import( './views/About.vue'),
]

const router = new VueRouter(
    //模式
    mode: 'history',
    base: process.env.BASE_URL,
    routes
)

export default router

App.vue就很简单了

<template>
    <router-view/>
</template>

<script>
export default 
  data() 
    return 
      radio: '1'
    ;
  


</script>

<style>
#app 
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: 0;

</style>

有点难以搞懂的bug需要配置这里一个样式 否则达不到预期效果

 

<style>

    body 
        margin: 0;
    

    html, body 
        height: 100%;
    
</style>

以上是关于vue element-ui 搭建侧边栏的主要内容,如果未能解决你的问题,请参考以下文章

vue中侧边导航栏组件实现

vue+elementui搭建后台管理界面(3侧边栏菜单)

基于element-ui封装侧边栏菜单,可无限展开

基于element-ui封装侧边栏菜单,可无限展开

基于element-ui封装侧边栏菜单,可无限展开

Vue项目搭建修改若依框架的侧边栏导航栏面包屑样式修改全局页面样式