[update] 框架调整
This commit is contained in:
danshihao
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<!-- 一级菜单 -->
|
||||
<div class="nav-menu">
|
||||
<ul class="nav-menu-list nav-menu-list-left">
|
||||
<li v-for="menu in showMenu.slice(0, 6)"
|
||||
:key="menu.id"
|
||||
@click="selectMenu(menu)"
|
||||
:class="{ active: openKeys.includes(menu.path)}">
|
||||
<div class="menu-item">
|
||||
<img v-if="menu.meta.icon && menu.meta.icon.includes('custom_menu_image_')"
|
||||
:src="require(`@/assets/images/menu/icon/${menu.meta.icon.replace('custom_menu_image_', '')}.png`)" alt=''>
|
||||
</div>
|
||||
<div class="menu-item-title">{{menu.meta.title}}</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav-menu-list nav-menu-list-right">
|
||||
<li v-for="menu in showMenu.slice(6, 12)"
|
||||
:key="menu.id"
|
||||
@click="selectMenu(menu)"
|
||||
:class="{ active: openKeys.includes(menu.path)}">
|
||||
<div class="menu-item">
|
||||
<img v-if="menu.meta.icon && menu.meta.icon.includes('custom_menu_image_')"
|
||||
:src="require(`@/assets/images/menu/icon/${menu.meta.icon.replace('custom_menu_image_', '')}.png`)" alt=''>
|
||||
</div>
|
||||
<div class="menu-item-title">{{menu.meta.title}}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'FirstLevelMenu',
|
||||
props: {
|
||||
menu: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
collapsed: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 选择的path
|
||||
selectPath: '',
|
||||
openKeys: [],
|
||||
selectedKeys: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 可以显示的一级菜单
|
||||
showMenu () {
|
||||
return this.menu.filter((item) => {
|
||||
if (item.hidden) {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route () {
|
||||
this.updateMenu()
|
||||
this.$emit('select', this.showMenu.find(item => item.path === this.openKeys[this.openKeys.length - 1]))
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.updateMenu()
|
||||
this.$emit('select', this.showMenu.find(item => item.path === this.openKeys[this.openKeys.length - 1]))
|
||||
},
|
||||
methods: {
|
||||
// 选择菜单
|
||||
selectMenu (menu) {
|
||||
this.selectPath = menu.path
|
||||
if (menu.children && menu.children.length > 0) {
|
||||
this.$router.push({ path: menu.children[0].path })
|
||||
} else {
|
||||
this.$router.push({ name: menu.name })
|
||||
}
|
||||
this.$emit('select', menu)
|
||||
},
|
||||
updateMenu () {
|
||||
const routes = this.$route.matched.concat()
|
||||
const { hidden } = this.$route.meta
|
||||
if (routes.length >= 3 && hidden) {
|
||||
routes.pop()
|
||||
this.selectedKeys = [routes[routes.length - 1].path]
|
||||
} else {
|
||||
this.selectedKeys = [routes.pop().path]
|
||||
}
|
||||
let openKeys = []
|
||||
routes.forEach(item => {
|
||||
openKeys.push(item.path)
|
||||
})
|
||||
|
||||
// update-begin-author:sunjianlei date:20210409 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题
|
||||
// 包含冒号的是动态菜单
|
||||
if (this.selectedKeys[0].includes(':')) {
|
||||
const selectedKey = this.$route.fullPath
|
||||
this.selectedKeys = [selectedKey]
|
||||
const newOpenKeys = []
|
||||
this.fullOpenKeys(this.menu, selectedKey, newOpenKeys)
|
||||
if (newOpenKeys.length > 0) {
|
||||
openKeys = newOpenKeys.reverse()
|
||||
}
|
||||
}
|
||||
// update-end-author:sunjianlei date:20210409 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题
|
||||
|
||||
// update-begin-author:taoyan date:20190510 for:online表单菜单点击展开的一级目录不对
|
||||
if (!this.selectedKeys || this.selectedKeys[0].indexOf(':') < 0) {
|
||||
this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
|
||||
}
|
||||
// update-end-author:taoyan date:20190510 for:online表单菜单点击展开的一级目录不对
|
||||
},
|
||||
fullOpenKeys (menus, selectedKey, openKeys) {
|
||||
for (const item of menus) {
|
||||
if (item.path === selectedKey) {
|
||||
openKeys.push(item.path)
|
||||
this.$emit('updateMenuTitle', item)
|
||||
return true
|
||||
} else if (Array.isArray(item.children)) {
|
||||
if (this.fullOpenKeys(item.children, selectedKey, openKeys)) {
|
||||
openKeys.push(item.path)
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// 一级导航样式
|
||||
.nav-menu {
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 12px 0;
|
||||
|
||||
.nav-menu-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
margin: 0 20px;
|
||||
max-width: 68px;
|
||||
|
||||
.menu-item {
|
||||
position: relative;
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
background-image: url("~@/assets/images/menu/top-menu.png");
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
font-size: 0;
|
||||
|
||||
img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-item-title {
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
font-family: Alimama ShuHeiTi, Alimama ShuHeiTi, sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: rgba(255,255,255,0.96);
|
||||
line-height: 19px;
|
||||
text-shadow: 0 4px 4px rgba(0,0,0,0.25);
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
// 选中的样式
|
||||
&.active {
|
||||
|
||||
.menu-item {
|
||||
background-image: url("~@/assets/images/menu/top-menu-act.png");
|
||||
}
|
||||
.menu-item-title {
|
||||
font-family: Alimama ShuHeiTi, Alimama ShuHeiTi, sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #FFC97A;
|
||||
line-height: 19px;
|
||||
text-shadow: 0 4px 4px rgba(0,0,0,0.25);
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user