基于 Element-ui 的简单后台模板

本模板基于 Element-ui 2.1 搭建完成，功能简略，望赐教。

项目环境需自行搭建，laravel 可参考 Laravel5.5+Vue+Element-ui+Vux 环境搭建来搭建。
先来两张效果图片

代码：

<template><div><el-container class="main"><el-aside :width="tabWidth+'px'"><div><div class="isClossTab" @click="isClossTabFun"><i :class="isCollapse?'el-icon-d-arrow-right':'el-icon-d-arrow-left'" ></i></div><el-menu :class="'menu'"default-active="1-4-1"class="el-menu-vertical-demo"@open="handleOpen"@close="handleClose":collapse="isCollapse"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span slot="title">导航一</span></template><el-menu-item-group><span slot="title">分组一</span><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><span slot="title">选项4</span><el-menu-item index="1-4-1">选项1</el-menu-item></el-submenu></el-submenu><el-menu-item index="2"><i class="el-icon-menu"></i><span slot="title">导航二</span></el-menu-item><el-menu-item index="3"><i class="el-icon-setting"></i><span slot="title">导航三</span></el-menu-item></el-menu></div></el-aside><el-container><el-header class="main-header"><el-dropdown><span class="el-dropdown-link"><img src="" alt=""></span><el-dropdown-menu slot="dropdown"><el-dropdown-item>退出登录</el-dropdown-item></el-dropdown-menu></el-dropdown></el-header><el-main><el-breadcrumb separator="/" class="crumbs"><el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item><el-breadcrumb-item>活动管理</el-breadcrumb-item><el-breadcrumb-item>活动列表</el-breadcrumb-item><el-breadcrumb-item>活动详情</el-breadcrumb-item></el-breadcrumb><div><router-view></router-view></div></el-main><el-footer class="main-footer" height="50px"><p>页脚</p></el-footer></el-container></el-container></div>
</template>
<style>*{padding: 0;margin: 0;}</style>
<style scoped lang="scss">$header-height:60px;$background-color: #545c64;$color: #FFF;.main{height: 100vh;min-width: 800px;min-height: 600px;overflow: hidden;aside{overflow: visible;height: 100%;background-color: $background-color;color: $color;.isClossTab{width: 100%;height: $header-height;cursor: pointer;font-size: 25px;text-align: center;line-height: $header-height;font-weight: bold;border-right: 1px solid #807c7c;box-sizing: border-box;}.menu {width: 100%;border-right:0;}}.main-header {background-color: $background-color;color: $color;.el-dropdown{cursor: pointer;float: right;}.el-dropdown-link{img{$imgMargin: (($header-height - 50)/2);display:inline-block;width:50px;height: 50px;border-radius: 25px;background-color: #FFF;margin-top: $imgMargin;}}}.crumbs {margin-bottom: 20px;}.main-footer{text-align: center;background-color: $background-color;color: $color;line-height: 50px;}}</style><script>export default {data() {return {isCollapse: false,tabWidth: 200,test1: 1,intelval: null,};},methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);},isClossTabFun(){clearInterval(this.intelval);if(!this.isCollapse){this.intelval = setInterval(()=>{if(this.tabWidth<= 64)clearInterval(this.intelval);this.tabWidth -= 1;}, 1);}else{this.tabWidth = 200;}this.isCollapse = !this.isCollapse;}}}
</script>

基于 Element-ui 的简单后台模板相关推荐

vue2 - 基于Element UI实现上传Excel表单数据功能
一.项目场景批量数据上传后台,需要从后台下载一个固定格式的 Excel表格,然后在表格里面添加数据,将数据格式化,再上传给后台,后台做解析处理,往数据库添加数据二.实现功能展示点击导入excel ...
基于Element ui 实现输入框只能输入数字并支持千分位
实现效果设置子组件 <template><el-inputref="money"v-model.trim="money":placehold ...
axure element ui素材_【Axure分享】基于Element UI的Axure Web组件
有一段时间没做过产品原型了,前一阵有一个web产品需要做原型,正好在搞前端,于是顺便把Element UI移植到Axure上,基本上实现了大部分的功能组件,部分过于繁琐的组件未实现. 自己觉得蛮满意的 ...
用vue(element ui)快速开发后台管理
平时我们在用vue开发网站后台管理的时候.比如说要写管理文章的功能,要先去写列表页面,编辑页面,添加页面.另外还需要程序提供对应的增删改查接口图片上传接口等等,那么有没有一种快速的方法.可以用程序来 ...
element ui 电商后台商品属性管理页面
电商后台商品属性管理最近在做电商后台,电商商品中有个SKU值,类似于服装的 "尺码""颜色""款式"等. 界面如下: 所用到的知识点如下 ...
基于element ui的收起展开检索条件效果
<el-button type="text" style="margin-left:600px;color: #8cc5ff;text-decoration: un ...
vue2.0基于element ui 上月本月下月
<div style="margin-bottom:15px ;float:right;"><el-button-group><el-button p ...
基于element UI的省（市）（区）三级（二级）（一级）联动数据以及使用方法
使用方法: <el-form-item label="省/市/区" required prop="homeDistrict"><el-casc ...
vue基于element ui走马灯卡片化的图片轮播
1.安装依赖 npm i element-ui -S 2.代码 <template><div><el-carousel :interval="4000" ...

基于 Element-ui 的简单后台模板

基于 Element-ui 的简单后台模板相关推荐

最新文章

热门文章