【利用若依代码生成和vue快速生成一个验证表单】
在构建区结合左右勾勒出下图这样的布局构建好后点击“复制代码”按钮,在项目中粘贴粘贴好后修改这部分代码,改成适合自己项目的格式即可代码如下:<template><div><el-container class="home-container"><!-- 侧边栏 --><el-aside :width="isCollapse ? '64px' :
·
在构建区结合左右勾勒出下图这样的布局
构建好后点击“复制代码”按钮,在项目中粘贴
粘贴好后修改这部分代码,改成适合自己项目的格式即可
代码如下:
<template>
<div>
<el-container class="home-container">
<!-- 侧边栏 -->
<el-aside :width="isCollapse ? '64px' : '230px'">
<!-- 头部logo -->
<template>
<div class="header-title" v-if="!isCollapse">
<img width="145" height="55" src="../assets/img.png" style="border-radius: 10px" alt="">
</div>
</template>
<!-- 菜单区域 -->
<el-menu
background-color="#282C34"
text-color="#fff"
active-text-color="#fff"
:collapse="isCollapse"
:collapse-transition="false"
:default-active="'/' + activePath"
unique-opened
router>
<!--active-text-color="#fff"当前激活菜单文字的颜色, :collapse折叠 :default-active当前激活菜单的index -->
<!-- 首页 -->
<el-menu-item
:index="item.path" v-for="item in menuList"
:key="item.id"
@click="selectMenu(item)">
<!--注意:index是必填属性,可以看成是ID,也就是说它是唯一的,代表路由的跳转-->
<i :class="item.class"></i>
<span slot="title">{{ item.label }}</span>
</el-menu-item>
</el-menu>
</el-aside>
<!-- 主体 -->
<el-container>
<!-- 头部 -->
<el-header>
<!-- 头部导航栏 -->
<div class="header-row">
<div class="toggle-button">
<!-- 折叠 展开 -->
<div>
<i :title="isCollapse ? '展开' : '收起'" class="fa fa-bars" @click="toggleCollapse"></i>
</div>
<!-- 当前加盟商-->
<div style="height:20px;width:100%;margin-left:10px">
<!--特殊图标-->
<div style="float:left;color:#E74405;font-size:15px;height:20px;line-height:20px;">
<el-dropdown @command="changeFranchisee">
<span class="el-dropdown-link">当前加盟商<i class="el-icon-arrow-down el-icon--right"></i></span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="a">先智售宝</el-dropdown-item>
<el-dropdown-item command="b">洛阳家联宝</el-dropdown-item>
<el-dropdown-item command="d" disabled>智鼓运用中心</el-dropdown-item>
<el-dropdown-item command="e">山西运城</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</div>
<!-- 头像下拉菜单 -->
<div class="header-avatar">
<div class="user">
管理员,您好!
</div>
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link">
<img width="35" height="35" style="border-radius:50%;background:#dddddd"
src="../assets/images/index/user3.png" alt="">
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click="logout()">
<router-link to="Logout">退出登录</router-link>
</el-dropdown-item>
<el-dropdown-item command="update-password">修改密码</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
<!-- tab标签页区域 - 用于标签页切换 -->
<div class="tabs-switch-page">
<!-- 此处 size="small/middle/big" 规定按钮的大小; // @click="changeMenu(tab)"点击标签跳转路由 //@close="handleClose(tab, index)"关闭tab标签-->
<!-- effect:主题,类似于vue2源码中的watch, 此处根据effect来判断 'dark' : 'plain' :是effect属性的可选值,点击的时候主题由plain变为dark-->
<el-tag
size="small"
v-for="(tab, index) in tabList"
:key="tab.name"
@close="handleClose(tab, index)"
@click="changeMenu(tab)"
:closable="tab.name !== 'home'"
:effect="activePath === tab.name ? 'dark' : 'plain'">
{{ tab.label }}
</el-tag>
</div>
</el-header>
<!-- 内容区 -->
<el-main>
<!-- 路由占位符,用于展示内容区的内容 -->
<div style="padding:15px; height:100%">
<keep-alive :include="catch_components">
<router-view/>
</keep-alive>
</div>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
import {mapState, mapMutations} from 'vuex';
export default {
components: {},
//组件被创建
created() {
//加载菜单
this.loadMenu();
},
computed: {
...mapState({ // 从 state 中的到的计算属性
activePath: state => state.activePath, // 已选中菜单
tabList: state => state.tabList, // tags菜单列表
catch_components: state => state.catch_components, // keepalive缓存
})
},
data() {
return {
//菜单列表
menuList: [],
// 折叠-展开 默认false不折叠
isCollapse: false,
}
},
methods: {
// 点击折叠 展开菜单
toggleCollapse() {
this.isCollapse = !this.isCollapse;
},
//当前加盟商下拉框
handleCommandAdd(commandAdd) {
this.$message('click on item ' + commandAdd);
},
logout: function () {
//回到登录页面
//跳转 ==== 路由
this.$router.push("/logout");
},
// 点击菜单 - 传入name,添加到keepalive缓存页面
selectMenu(item) {
// 加入keepalive缓存
this.$store.commit('addKeepAliveCache', item.name)
//添加tags标签
//访问welcome 就代表home
const name = item.name === 'welcome' ? 'home' : item.name;
const submenu = {
path: name,
name: name,
label: item.label
};
//修改选中菜单
this.$store.commit('selectMenu', submenu)
},
// 关闭tab标签
handleClose(tab, index) {
// 历史选中菜单
let oldActivePath = this.$store.state.activePath;
// 历史已选中菜单列表
const oldTabList = this.$store.state.tabList;
// 计算标签个数
let length = oldTabList.length - 1
// 删除tabList中的该对象
for (let i = 0; i < oldTabList.length; i++) {
let item = oldTabList[i]
if (item.name === tab.name) {
oldTabList.splice(i, 1);
}
}
// 删除keepAlive缓存
this.$store.commit('removeKeepAliveCache', tab.name)
// 如果关闭的标签不是当前路由的话,就不跳转
if (tab.name !== oldActivePath) {
return
}
// 如果length为1,必然只剩下首页标签,此时关闭后,更新到首页
if (length === 1) {
// 同时存储菜单
this.$store.commit('closeTab', {activePath: 'home', tabList: oldTabList})
// tab页向左跳转
this.$router.push({name: oldTabList[index - 1].name})
// 不再向下执行
return
}
// 关闭的标签是最右边的话,往左边跳转一个
if (index === length) {
// 同时更新路径
oldActivePath = oldTabList[index - 1].name
// 同时存储菜单
this.$store.commit('closeTab', {activePath: oldActivePath, tabList: oldTabList})
// tab页向左跳转
this.$router.push({name: oldTabList[index - 1].name})
} else {
// 同时更新路径
oldActivePath = oldTabList[index].name
// 同时存储菜单
this.$store.commit('closeTab', {activePath: oldActivePath, tabList: oldTabList})
// tab页向右跳转
this.$router.push({name: oldTabList[index].name})
}
},
// 点击标签跳转路由
changeMenu(item) {
// 历史选中菜单
const oldActivePath = this.$store.state.activePath;
// 首先判断点击的是否是自己,如果是自己则return
if (oldActivePath === item.name) {
return
}
// 不是自己,存储菜单
this.$store.commit('changeMenu', item.name)
// 页面跳转
this.$router.push({name: item.name})
},
//加载菜单
loadMenu() {
this.menuList = [
{
id: 'number-01',
class: 'fa el-icon-document',
path: '/home',
label: '首页',
name: 'home'
},
{
id: 'number-02',
class: 'fa el-icon-document',
path: '/commoditySales',
label: '管理销量',
name: 'commoditySales'
},
{
id: 'number-03',
class: 'fa el-icon-document',
path: '/orderStatistics',
label: '订单统计',
name: 'orderStatistics'
},
{
id: 'number-04',
class: 'fa el-icon-document',
path: '/test4',
label: '商品管理',
name: 'test4'
},
{
id: 'number-05',
class: 'fa el-icon-document',
path: '/test5',
label: '账户管理',
name: 'test5'
},
{
id: 'number-06',
class: 'fa el-icon-document',
path: '/form',
label: '表单验证',
name: 'form'
},
{
id: 'number-07',
class: 'fa el-icon-document',
path: '/test7',
label: '消息管理',
name: 'test7'
},
{
id: 'number-08',
class: 'fa el-icon-document',
path: '/Login',
label: '登录中心',
name: 'Login'
},
{
id: 'number-09',
class: 'fa el-icon-document',
path: '/ServiceLog',
label: '查询日志',
name: 'ServiceLog'
},
]
}
},
};
</script>
<style lang="less" scoped>
.el-col-align-middle {
line-height: 40px;
text-align: left;
font-size: 14px;
}
//导航栏部分
.home-container {
height: 100%;
}
.el-header {
color: rgb(0, 0, 0);
font-size: 20px;
border-bottom: 1px solid #dddddd;
height: 80px !important;
padding: 0;
background: #fff;
}
.header-row {
height: 40px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
border-bottom: 1px solid #dddddd;
overflow: hidden;
}
.header-avatar {
float: right;
width: 40%;
height: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 20px;
}
.user {
font-size: 14px;
font-weight: bold;
padding: 0 10px;
}
.el-aside {
background-color: #282C34;
height: 100%;
}
.header-title {
padding-left: 10px;
height: 60px;
font-weight: 300;
display: flex;
font-size: 20px;
align-items: center;
cursor: pointer;
color: #ffffff;
}
h1 {
margin-left: 10px;
}
.header-title-hiddle {
width: 64px;
height: 60px;
display: table-cell;
vertical-align: middle;
text-align: center;
cursor: pointer;
}
.el-menu {
border-right: none;
}
// 菜单选中背景色
.el-menu-item.is-active {
background-color: #1890FF !important;
}
// 菜单悬浮背景色
.el-menu-item:hover {
background-color: #ee7c12 !important;
}
//main
.el-main {
background-color: #eaedf1;
padding: 5px;
height: 100%;
}
//导航栏列表(图标和文字之间的距离)
.fa {
margin-right: 10px;
}
// 点击展开/折叠按钮
.toggle-button {
width: 80%;
font-size: 20px;
line-height: 40px;
color: #595959;
text-align: left;
display: flex;
align-items: center;
float: left;
padding-left: 15px;
i {
cursor: pointer;
}
}
面包屑导航
.el-breadcrumb {
margin-bottom: 0;
}
// tab页 删除/添加页面
.tabs-switch-page {
display: flex;
align-items: center;
height: 40px;
background-color: #fff;
overflow: hidden;
}
//tab内部标签之间的设置
.el-tag {
cursor: pointer; //鼠标指针变成手
margin-left: 10px;
border-radius: 20px;
font-size: 12px;
color: #1890FF;
border-color: #1890FF;
}
//tab单个页面选中后的样子
.el-tag--dark {
color: #fff;
background-color: #1890FF;
}
//当前加盟商 下拉框
.el-dropdown-link {
cursor: pointer;
color: #409EFF;
font-size: 15px;
}
.el-icon-arrow-down {
font-size: 15px;
}
.submit-row {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
</style>
最后运行项目就能看到最终效果了
更多推荐
已为社区贡献3条内容
所有评论(0)