vue2代码 --elementUI后台框架

最新推荐文章于 2024-06-18 17:21:06 发布

代廷耀

最新推荐文章于 2024-06-18 17:21:06 发布

阅读量359

点赞数 1

文章标签： elementui javascript ecmascript

本文链接：https://blog.csdn.net/m0_56983341/article/details/137051641

版权

vue2+elment-ui后台管理展示页框架

效果图

在这里插入图片描述

首页

<template>
  <div class="home">
    
    <el-container>
      <el-aside :width="$store.state.isCollapse? '60px' :  '200px'">
        <CommonAside></CommonAside>
      </el-aside>
      <el-container>
        <el-header> <CommonHeader></CommonHeader> </el-header>
        <el-main>
          
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
import CommonAside from "../components/CommonAside"
import CommonHeader from "../components/CommonHeader.vue"

export default {
  name: 'HomeView',
  components:{
    CommonAside,CommonHeader
  },
  data(){
    return{
    
    }
  }
}
</script>
<style lang="scss" scoped>
.el-aside{
  height: 100vh;
  background-color: #545c64;
}
.el-header{
  padding: 0;
}
.el-main{
  height: calc(100vh - 60px);
  overflow-y: auto;
}
</style>

侧边栏

<template>
    <div>
        <el-menu
      :default-active="currentIndex"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      :collapse="isCollapse"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item v-for="item,index in menuList" :key="index" :index="item.id">
        <i class="el-icon-menu"></i>
        <span slot="title">{{ item.title }}</span>
      </el-menu-item>
    </el-menu>
    </div>
</template>

<script>
    export default {
        data(){
            return {
               menuList:[
                {
                    id:1,
                    path:'/bar',
                    name:'bar',
                    title:"柱状"
                },
                {
                    id:2,
                    path:'/line',
                    name:'line',
                    title:"折线"
                },
                {
                    id:3,
                    path:'/pie',
                    name:'pie',
                    title:"饼图"
                }
               ],
               currentIndex:1
            }
        },
        computed:{
            isCollapse(){
                return this.$store.state.isCollapse
            }
        },
        methods:{
            handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
        }
    }
</script>

<style lang="scss" scoped>
.el-menu{
    border-right: none;
}
</style>

头部

<template>
    <div class="header_container">
        <i class="el-icon-menu" @click="handleCollapse" ></i>
        <div></div>
    </div>
</template>

<script>
    export default {
        data(){
            return{

            }
        },
        methods:{
            handleCollapse(){
                this.$store.commit('handleMenu')
            }
        }
    }
</script>

<style lang="scss" scoped>
.header_container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    padding: 0 20px;
    background-color: #545c64;
}
</style>