2017-01-13 10:14:48 NotBad_ 阅读数 1010
2019-08-17 17:28:47 pengjunlee 阅读数 1352

文章系列:

前言 

我打算把接下来要写的几篇文章写成一个系列,用来记录一下如何基于Vue一步一步地搭建一个后台管理系统。 

文章前传:

《Vue组件中引入jQuery》

《Webpack项目中引入Bootstrap4.x》

《Webpack项目中使用ToolTipster》

本篇文章就是这个系列的第一篇,将对整个系统的页面布局进行设计。在菜单目录树的实现中我们还将使用到前一篇 《前端无小事--Webpack项目中使用ToolTipster》中创建好的提示框组件,最终实现的页面效果如下。

Layout.vue

整个页面的布局分为三块区域:左侧菜单区、顶部菜单栏和内容区。

下面是它的完整代码:

<template>
  <div class="layout">
    <div class="left-container" :style="{width: status.isCollapsed?'64px':'200px'}">
      <div class="logo-wrapper">
        <img style="width:50px;height:50px;" src="./DigitalX1.png" />
      </div>
      <div class="menu-wrapper">
        <v-menu v-for="(menu,index) in this.menu_list" :key="index" :menu="menu" :status="status"></v-menu>
      </div>
    </div>

    <div class="topbar-container" :style="{left: this.status.isCollapsed?'64px':'200px'}">
      <div class="btn btn-mini btn-success" @click="collapsed">
        <i class="icon-exchange"></i>
      </div>
    </div>
    <div class="content-container" :style="{left: this.status.isCollapsed?'64px':'200px'}">
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
import $ from "jquery";
import MenuItem from "../menu/MenuItem";

export default {
  components: {
    "v-menu": MenuItem
  },
  data() {
    return {
      menu_list: [
        {
          path: "/home",
          title: "首页",
          icon: "icon-home icon-large"
        },
        {
          path: "/user",
          title: "用户管理",
          icon: "icon-user icon-large",
          children: [
            { path: "/user/roles", title: "用户角色" },
            { path: "/user/auths", title: "用户权限" }
          ]
        },
        {
          path: "/sys",
          title: "系统管理",
          icon: "icon-heart icon-large",
          children: [
            { path: "/sys/jobs", title: "定时任务" },
            { path: "/sys/menus", title: "菜单管理" }
          ]
        }
      ],
      status: {
        isCollapsed: false,
        currentMenu: "首页",
        parentMenu: "首页"
      }
    };
  },
  methods: {
    collapsed: function() {
      if (this.status.isCollapsed) {
        this.status.isCollapsed = false;
        $(".l2").removeClass("hidden");
      } else {
        this.status.isCollapsed = true;
        $(".l2").addClass("hidden");
      }
    }
  }
};
</script>
<style scoped>
.left-container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
  background-color: #f6f6f6;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 2px 4px 0 rgba(96, 125, 139, 0.9),
    0 0 6px 0 rgba(96, 125, 139, 0.4);
}
.logo-wrapper {
  display: block;
  margin: 20px 5px;
  text-align: center;
}
.topbar-container {
  position: fixed;
  right: 0;
  top: 0;
  height: 48px;
  line-height: 48px;
  padding: 0 10px;
  background-color: #f6f6f6;
  box-shadow: 0 2px 4px 0 rgba(96, 125, 139, 0.9),
    0 0 6px 0 rgba(96, 125, 139, 0.4);
  transition: all 0.3s ease-in-out;
  z-index: 99;
}
.content-container {
  position: fixed;
  right: 0;
  top: 48px;
  bottom: 0;
  padding: 16px;
  overflow: auto;
  transition: all 0.3s ease-in-out;
}
</style>

MenuItem.vue

MenuItem是一个自定义的菜单组件,每一个一级菜单都会被渲染成一个MenuItem实例,并包含了该一级菜单下面的二级菜单。

<template>
  <div class="menu">
    <div class="menu-box l1">
      <vue-tooltipster
        :tooltipsterOptions="{side:'right'}"
        v-if="hasChildren && status.isCollapsed"
      >
        <div
          :class="menu.title==status.parentMenu || menu.title==status.currentMenu? 'menu-item current-menu':'menu-item'"
          @click="menuClick($event)"
        >
          <span class="icon-span">
            <i v-bind:class="menu.icon"></i>
          </span>
        </div>
        <div slot="content">
          <li
            class="tip-menu"
            v-for="(submenu,index) in menu.children"
            :key="index"
            :title="submenu.title"
            @click="tipMenuClick($event)"
          >
            <span>{{submenu.title}}</span>
          </li>
        </div>
      </vue-tooltipster>
      <div
        v-else
        :class="menu.title==status.currentMenu? 'menu-item current-menu':'menu-item'"
        @click="menuClick($event)"
      >
        <span class="icon-span">
          <i v-bind:class="menu.icon"></i>
        </span>
        <span v-if="!status.isCollapsed">{{menu.title}}</span>
        <span class="arrow-span" v-if="hasChildren && !status.isCollapsed">
          <i v-if="showSubMenu" class="menu-arrow icon-angle-up icon-large"></i>
          <i v-else class="menu-arrow icon-angle-down icon-large"></i>
        </span>
      </div>
      <ul class="menu-box l2" v-if="showSubMenu && hasChildren && !status.isCollapsed">
        <li
          v-for="(submenu,index) in menu.children"
          :key="index"
          :class="submenu.title==status.currentMenu? 'menu-item current-menu':'menu-item'"
          :title="submenu.title"
          @click="subMenuClick($event)"
        >
          <span class="icon-span"></span>
          <span v-if="!status.isCollapsed">{{submenu.title}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import $ from "jquery";
import VueTooltipster from "../tooltip/V-ToolTip";

export default {
  data() {
    return {
      showSubMenu: this.menu.title == this.status.parentMenu
    };
  },
  components: {
    VueTooltipster
  },
  props: ["menu", "status"],
  computed: {
    hasChildren: function() {
      return this.menu.children && this.menu.children.length > 0;
    }
  },
  methods: {
    menuClick: function(event) {
      var $this = $(event.currentTarget);
      var $arrow = $this.find(".menu-arrow");
      if (this.hasChildren) {
        if ($arrow.hasClass("icon-angle-down")) {
          $arrow.removeClass("icon-angle-down").addClass("icon-angle-up");
          this.showSubMenu = true;
        } else {
          $arrow.removeClass("icon-angle-up").addClass("icon-angle-down");
          this.showSubMenu = false;
        }
      } else {
        this.status.parentMenu = this.menu.title;
        this.status.currentMenu = this.menu.title;
        $(".menu-item").removeClass("current-menu");
        $this.addClass("current-menu");
        console.log("进入菜单:"+this.status.currentMenu);
      }
    },
    subMenuClick: function(event) {
      var $this = $(event.currentTarget);
      $(".menu-item").removeClass("current-menu");
      $this.addClass("current-menu");
      this.status.parentMenu = this.menu.title;
      this.status.currentMenu = $this.attr("title");
      console.log("进入菜单:"+this.status.currentMenu);
    },
    tipMenuClick: function(event) {
      var $this = $(event.currentTarget);
      this.status.currentMenu = $this.attr("title");
      this.status.parentMenu = this.menu.title;
      console.log("进入菜单:"+this.status.currentMenu);
    }
  }
};
</script>
<style scoped>
.menu-box {
  text-align: left;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-item {
  cursor: pointer;
  color: black;
  line-height: 48px;
  white-space: nowrap;
  list-style: none;
}
.menu-item:hover {
  color: #7bb6e4;
  background-color: rgba(40, 167, 69, 0.5);
}
.current-menu {
  color: white !important;
  background-color: #28a745 !important;
}
.tip-menu {
  cursor: pointer;
  color: black;
  line-height: 48px;
  white-space: nowrap;
  list-style: none;
}
.tip-menu:hover {
  color: #28a745;
}
.icon-span {
  display: inline-block;
  width: 64px;
  padding-left: 22px;
}
.arrow-span {
  display: inline-block;
  position: absolute;
  right: 20px;
}
.hidden {
  display: none !important;
}
</style>

==============================我是分割线===============================

如果你想和我一样自己写一个目录树组件,我的建议是 最好不要自己写 ,原因很简单 可能出现的意外太多了,你很难能考虑到所有情况。所以,你的目录树组件好用不好用还不一定。我上面自己写的那个组件在实际使用时就出现了问题:当用户直接在地址栏输入地址时,如何定位到菜单;当用户输入一个错误的地址时,菜单要如何展示;云云。。。

明智的做法是使用开源的组件,省得去重复造轮子,关键是稳定性也是经过大家考验的。

例如,我使用的是 Element ,对上面的布局进行调整后代码如下:

<template>
  <div class="layout">
    <div class="left-container" :style="{width: status.isCollapsed?'64px':'200px'}">
      <div class="logo-wrapper">
        <img style="width:50px;height:50px;" src="./DigitalX1.png" />
      </div>
      <div class="menu-wrapper">
        <el-menu
          text-color="#000000"
          active-text-color="#ffffff"
          router
          unique-opened
          :collapse="status.isCollapsed"
          :default-active="$route.path"
        >
          <template v-for="(menu, index) in menu_list">
            <el-menu-item class="menu-item" v-if="!menu.children" :index="menu.path" :key="index">
              <i :class="menu.icon" style="font-size:24px;"></i>
              <span slot="title">{{menu.title}}</span>
            </el-menu-item>
            <el-submenu v-else :index="menu.path">
              <template slot="title">
                <i :class="menu.icon" style="font-size:24px;"></i>
                <span slot="title">{{menu.title}}</span>
              </template>
              <el-menu-item
                class="menu-item"
                v-for="(subMenu, subIndex) in menu.children"
                :index="subMenu.path"
                :key="subIndex"
              >
                <span slot="title" style="margin-left:13px;">{{subMenu.title}}</span>
              </el-menu-item>
            </el-submenu>
          </template>
        </el-menu>
      </div>
    </div>

    <div class="topbar-container" :style="{left: this.status.isCollapsed?'64px':'200px'}">
      <div class="el-button el-button--default el-button--small" @click="collapsed">
        <i id="collapsedIcon" class="el-icon-s-fold"></i>
      </div>
    </div>
    <div class="content-container" :style="{left: this.status.isCollapsed?'64px':'200px'}">
      <div class="content" style="height: 100%;">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      menu_list: [
        {
          path: "/home",
          title: "首页",
          icon: "el-icon-s-home"
        },
        {
          path: "/user",
          title: "用户管理",
          icon: "el-icon-user-solid",
          children: [
            { path: "/user/roles", title: "用户角色" },
            { path: "/user/auths", title: "用户权限" }
          ]
        },
        {
          path: "/sys",
          title: "系统管理",
          icon: "el-icon-s-tools",
          children: [
            { path: "/sys/jobs", title: "定时任务" },
            { path: "/sys/menus", title: "菜单管理" }
          ]
        }
      ],
      status: {
        isCollapsed: false,
        parentMenu: "用户管理"
      }
    };
  },
  methods: {
    collapsed: function() {
      if (this.status.isCollapsed) {
        this.status.isCollapsed = false;
        $("#collapsedIcon")
          .removeClass("el-icon-s-unfold")
          .addClass("el-icon-s-fold");
      } else {
        this.status.isCollapsed = true;
        $("#collapsedIcon")
          .removeClass("el-icon-s-fold")
          .addClass("el-icon-s-unfold");
      }
    }
  }
};
</script>
<style scoped>
.left-container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
  background-color: #f6f6f6;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 2px 4px 0 rgba(96, 125, 139, 0.9),
    0 0 6px 0 rgba(96, 125, 139, 0.4);
}
.logo-wrapper {
  display: block;
  margin: 20px 5px;
  text-align: center;
}
.topbar-container {
  position: fixed;
  right: 0;
  top: 0;
  height: 48px;
  line-height: 48px;
  padding: 0 10px;
  background-color: #f6f6f6;
  box-shadow: 0 2px 4px 0 rgba(96, 125, 139, 0.9),
    0 0 6px 0 rgba(96, 125, 139, 0.4);
  transition: all 0.3s ease-in-out;
  z-index: 99;
}
.content-container {
  position: fixed;
  right: 0;
  top: 48px;
  bottom: 0;
  padding: 16px;
  overflow: auto;
  transition: all 0.3s ease-in-out;
}
.menu-item.is-active {
  background-color: #28a745 !important;
}
</style>

代码少了不少,是不是清爽了许多!!!

2016-05-31 14:59:52 u011127019 阅读数 9093

1.目前比较火的一个模板AngularJs+Bootstrap后台模板

来自花瓣网

http://huaban.com/pins/552360855/

演示地址

http://www.frontsucai.com/view.php?id=53


2.SB Admin 2

来源地址:

http://startbootstrap.com/template-overviews/sb-admin-2/

演示地址:

http://blackrockdigital.github.io/startbootstrap-sb-admin-2/pages/index.html


3.Bootstrap_Metro_Dashboard

GitHub地址:

https://github.com/jiji262/Bootstrap_Metro_Dashboard

演示地址:

http://jiji262.github.io/Bootstrap_Metro_Dashboard/index.html


4.AdminLTE (推荐)

下载地址:

https://almsaeedstudio.com/

演示地址:

https://almsaeedstudio.com/preview

Asp.Net+MVC+AdminLTE 简单Demo:

源代码地址:

http://git.oschina.net/tiama3798/BootstrapBack_Demo/tree/Bookstrap_AdminLTE_Demo1.0/


2018-06-13 17:43:57 oneblue123 阅读数 2977
8

一、框架整理

1、灰黑色后台框架
2、论如何把后台管理系统写出花(关于后台开发的相关技术)
3、最新的技术-Vue后台管理
4、AdminLTE

clipboard.png

可以使用YII建立RABC权限管理
yii2+AdminLTE搭建完美后台并实现rbac权限控制实例教程

Laravel建立RABC权限管理
在Laravel5.* 中使用 AdminLTE

5、flatlab

clipboard.png

6、laravel-vue-cms
使用laravel+Vue开发的后台管理系统
clipboard.png

7、支付宝蚂蚁前段框架https://ant.design

clipboard.png

8、饿了么开源的后台管理框架
clipboard.png

9、 Larval 5.3 Rbac 后台实例

clipboard.png

clipboard.png

10、2016 Top20后端管理模板

11、模板之家国内后台管理框架收集

二、选择框架

后台管理系统框架非常多,经过考虑,选择饿了么的开源框架,原因是:该框架大气简洁,最重要的一点是使用最新的前端技术Vue.js,Vue简单易上手,有许多现成的脚手架可以直接拿来用,在使用该框架时,也可以顺手学学目前最流行的前端技术。

三、打包工具Webpack了解

Webpack是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

四、包管里工具npm

在正式开始饿了么管理框架学习之前,我们先认识一下npm。

npm是什么东东?npm其实是Node.js的包管理工具(package manager)。

为啥我们需要一个包管理工具呢?因为我们在Node.js上开发时,会用到很多别人写的JavaScript代码。如果我们要使用别人写的某个包,每次都根据名称搜索一下官方网站,下载代码,解压,再使用,非常繁琐。于是一个集中管理的工具应运而生:大家都把自己开发的模块打包后放到npm官网上,如果要使用,直接通过npm安装就可以直接用,不用管代码存在哪,应该从哪下载。

更重要的是,如果我们要使用模块A,而模块A又依赖于模块B,模块B又依赖于模块X和模块Y,npm可以根据依赖关系,把所有依赖的包都下载下来并管理起来。否则,靠我们自己手动管理,肯定既麻烦又容易出错。

简而言之,NPM是随同NodeJS一起安装的包管理工具(安装NodeJS),能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:

  • 允许用户从NPM服务器下载别人编写的第三方包到本地使用。

  • 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。

  • 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

讲了这么多,npm究竟在哪?

其实npm已经在Node.js安装的时候顺带装好了。我们在命令提示符或者终端输入npm -v,应该看到类似的输出:

1、查看npm的版本

$ npm -v
2.3.0

2、使用 npm 命令安装模块
npm 安装 Node.js 模块语法格式如下:

$ npm install <Module Name>

以下实例,我们使用 npm 命令安装常用的 Node.js web框架模块 express:

$ npm install express

安装好之后,express 包就放在了工程目录下的 node_modules 目录中,因此在代码中只需要通过 require('express') 的方式就好,无需指定第三方包路径。

var express = require('express');

五、示例

使用element开发的后台框架示例

clipboard.png

clipboard.png

演示地址:https://taylorchen709.github....

源码地址:https://github.com/taylorchen...

使用:

# install dependencies
npm install

# serve with hot reload at localhost:8081
npm run dev

# build for production with minification
npm run build

六、 Laravel-Administrator

【扩展推荐】管理员后台快速生成工具 Administrator "增强版" 分享

该后台非常好用,十分钟就可以搭建起一个简单的管理后台:

clipboard.png

七、laravel-admin

该管理后台非常强大,使用Laravel AdminLTE开发,可以快速实现增删改查功能及角色管理。

项目:GitHub地址: z-song/laravel-admin

clipboard.png

2019-11-01 09:56:25 RudeCrab 阅读数 452

前言

大家都知道,后台管理界面不需要很酷炫的动画效果,也不需要花里胡哨的界面展示,只需要简洁易用、便于管理数据。而现在普遍的后台管理系统的界面布局都差不多,上中下结构,然后左边是导航栏。随便贴两个Bootstrap的主题模板就是这样的:
在这里插入图片描述
在这里插入图片描述
这其中最难的不是布局,而是如何点击左侧导航栏来渲染中央显示界面(路由)。在这里我会用Vue.js和ElementUI来快速搭建起这样的后台管理界面布局!

准备

首先,通过Vue-cli工具来搭建一个脚手架。项目搭建好后呢,接下来要导入我们要用的组件,我在这里会用到ElementUI和font-awesome图标(当然也可以直接使用ElementUI中的图标)。
使用npm来安装两个工具:
npm install element-ui --save-dev
npm install font-awesome --save-dev
安装完毕后,在main.js里导入两个工具,这样才能在项目中使用:

import Vue from 'vue'
import App from './App.vue'
import router from './router'

// 导入ElementUI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 导入font-awesome(导入就可以直接用了)
import 'font-awesome/scss/font-awesome.scss'

Vue.use(ElementUI); // 使用ElementUI

Vue.config.productionTip = false

new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

配置路由

所有都准备好了后,我们来修改App.vue文件,这个是整个项目的界面入口,所以我们在这里定义好最基本的视图:

<template>
    <div id="app">
        <!--主路由视图-->
        <router-view/>
    </div>
</template>

<style lang="scss">
    // 整体布局样式,让整个视图都铺满
    html, body, #app {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
    }
</style>

然后我们在router的js文件里配置好路由,注意看注释:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
    {
        // 重定向,用来指向一打开网页就跳转到哪个路由
        path: '/',
        redirect: '/main'
    },
    {
        // 首页
        path: '/main',
        name: 'Main',
        component: () => import('../views/Main.vue'),
        children:[// 开始嵌套路由,这下面的所有路由都是Main路由的子路由
            {
                path:'/', // 嵌套路由里默认是哪个网页
                redirect: '/index'
            },
            {
                path:'/index', // 首页的路由
                name:'Index',
                component:() => import('../views/Index.vue')
            },
            {
                path:'/setting', // 设置页面的路由
                name:'Setting',
                component:() => import('../views/Setting.vue')
            }
        ]
    },
    {
        path:'/*', // 注意,这里不是嵌套理由了,这是为了设置404页面,一定要放在最后面,这样当服务器找不到页面的时候就会返回404
        name:'404',
        component: () => import('../views/404.vue')
    }
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router

在路由设置中,我们分别使用了四个页面组件:Main.vue,Index.Vue,Setting.vue,404.vue。这个都是要自己新建的,其中Index.Vue和Setting.vue都是Main.vue的嵌套路由,这里为了做演示,Index.vue和Setting.vue里面就只有一个简单的一级标题,我们接下来最重要的设置就是Main.vue。

布局

我们先在Main.vue里布置最基本的结构,即上中下,中间又分左右:

<template>
    <el-container>
        <!--顶部-->
        <el-header></el-header>

        <!--中央区域-->
        <el-main>
            <el-container>
                <!--左侧导航栏-->
                <el-aside></el-aside>
                <!--主内容显示区域,数据内容都是在这里面渲染的-->
                <el-main></el-main>
            </el-container>
        </el-main>

        <!--底部-->
        <el-footer></el-footer>
    </el-container>
</template>

这样最基本的布局就好了,我们接下来只需要在对应的区域渲染好内容就行,这里最主要的就是使用ElementUI其中的路由功能,注意看注释:

<template>
    <el-container>
        <!--顶部-->
        <el-header style="border-bottom: 1px solid gray;">
            <el-row style="margin: 10px 15px">
                <el-col :span="1">
                    <!--收缩条-->
                    <a href="#" @click="changeCollapse" style="font-size: 25px;color:#909399;"><i
                            :class="collpaseIcon"></i></a>
                </el-col>
            </el-row>
        </el-header>
        <!--中央区域-->
        <el-main>
            <el-container>
                <!--左侧导航栏-->
                <el-aside :style="{width:collpaseWidth}">
                    <!--default-active代表导航栏默认选中哪个index, :collapse决定导航栏是否展开,为boolean类型
                    :router决定导航栏是否开启路由模式,即在菜单item上设置路由是否生效,值为boolean类型-->
                    <el-menu
                            default-active="0"
                            class="el-menu-vertical-demo"
                            :collapse="isCollapse"
                            :router="true"
                    >
                        <!--index设置当前item的下标,:route则是传一个对象进行,指定路由-->
                        <el-menu-item index="0" :route="{name:'Index'}">
                            <i class="fa fa-magic"></i>
                            <span slot="title"> 首页</span>
                        </el-menu-item>

                        <el-submenu index="1">
                            <template slot="title">
                                <i class="fa fa-cogs"></i><span> 系统管理</span>
                            </template>

                            <el-menu-item index="/Setting" :route="{name:'Setting'}"><i class="fa fa-cog"></i> 网站设置
                            </el-menu-item>
                            <el-menu-item index="1-2"><i class="fa fa-user-circle-o"></i> 角色管理</el-menu-item>
                            <el-menu-item index="1-2"><i class="fa fa-object-group"></i> 店铺模板</el-menu-item>
                        </el-submenu>

                        <el-submenu index="2">
                            <template slot="title">
                                <i class="fa fa-users"></i>
                                <span> 会员管理</span>
                            </template>

                            <el-menu-item index="2-1" :route="{name:'Customer'}"><i class="fa fa-address-card-o"></i>
                                会员列表
                            </el-menu-item>
                            <el-menu-item index="2-2"><i class="fa fa-envelope-o"></i> 会员通知</el-menu-item>
                        </el-submenu>


                    </el-menu>

                </el-aside>
                <!--主内容显示区域-->
                <el-main>
                    <!--路由渲染-->
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-main>
        <!--底部-->
        <el-footer style="border-top: 1px solid gray"></el-footer>
    </el-container>
</template>

<script>
    // 这一大段JS就是为了做收缩/展开导航栏而用的!
    export default {
        name: "Main",
        data: function () {
            return {
                isCollapse: false, // 决定左侧导航栏是否展开
            }
        },
        computed: {
            collpaseIcon: function () { // 左侧导航栏是否展开状态的图标
                // 如果是展开状态就图标向右,否则图标向左
                return this.isCollapse ? 'el-icon-s-fold' : 'el-icon-s-unfold';
            },
            collpaseWidth: function () { // 左侧导航栏是否展开状态的宽度
                // 如果是展开状态就导航栏宽度为65px,否则200px
                return this.isCollapse ? '65px' : '200px';
            }
        },
        methods: {
            changeCollapse: function () { // 更改左侧导航栏展示状态
                this.isCollapse = !this.isCollapse;
            }
        }
    }
</script>

<style scoped>
    /*整体显示区域布局样式*/
    .el-container {
        height: 100%;
    }

    .el-header, .el-main {
        padding: 0;
    }

    /*左边导航栏具体样式*/
    .el-menu-vertical-demo.el-menu {
        padding-left: 20px;
        text-align: left;
        height: 100%;
        padding: 0;
    }

    el-container > .el-menu-vertical-demo.el-menu {
        padding: 0;
    }

    .el-submenu .el-menu-item, .el-menu-item {
        min-width: 50px;
    }

    .el-menu-item {
        padding: 0;
    }
</style>

这时候页面就已经做好了,我们来看下效果:
在这里插入图片描述

vue后台模板整理

阅读数 9

没有更多推荐了,返回首页