<template>
|
<div class="MenuBox">
|
<!-- 菜单 -->
|
<div class="menuContent"
|
v-show="!menuIsShow"
|
:class="{ menuActive: menuIsShow }">
|
<div class="menuItemBox"
|
@click="setMenuClick(item)"
|
:id="item.id"
|
v-for="(item, index) in menuOption"
|
:key="index">
|
{{ item.name }}
|
</div>
|
<div class="closeMenu"
|
@click="setMenuIsShow">
|
<el-icon :size="20">
|
<DArrowRight />
|
</el-icon>
|
</div>
|
</div>
|
<div v-show="menuIsShow"
|
@click="setMenuIsShow"
|
class="rightMenu">
|
<el-icon :size="20">
|
<DArrowLeft />
|
</el-icon>
|
</div>
|
</div>
|
<!-- 二级菜单 -->
|
<div class="childMenuBox"
|
v-show="childMenuIsShow">
|
<div @click="setChildMenuClick(item)"
|
v-for="(item, key) in childMenuOption"
|
:key="key">
|
{{ item.name }}
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { ref, onMounted, nextTick, watch } from "vue";
|
import { DArrowRight, DArrowLeft } from "@element-plus/icons-vue";
|
import menuData from "@/assets/js/data/menuData";
|
import menuManager from "@/assets/js/map/menuManager";
|
import militaryPlotting from "@/components/plot/militaryPlotting";
|
const menuOption = ref([]);
|
const childMenuOption = ref([]);
|
const menuIsShow = ref(false);
|
const childMenuIsShow = ref(false);
|
const setCheckMenuFlag = ref(null);
|
// 菜单显隐切换
|
const setMenuIsShow = () => {
|
menuIsShow.value = !menuIsShow.value;
|
if (menuIsShow.value) {
|
childMenuIsShow.value = false;
|
}
|
};
|
// 菜单初始化
|
const setMenuStart = () => {
|
menuOption.value = menuData.menuData;
|
};
|
//菜单点击事件
|
const setMenuClick = (res) => {
|
const obj = menuManager.init(res);
|
if (obj) {
|
if (childMenuIsShow.value && obj == setCheckMenuFlag.value) {
|
childMenuIsShow.value = false;
|
setCheckMenuFlag.value = null;
|
return;
|
}
|
setCheckMenuFlag.value = obj;
|
var client = document.getElementById(obj).getBoundingClientRect().left;
|
document.getElementsByClassName("childMenuBox")[0].style.left =
|
client + "px";
|
childMenuOption.value = menuData[obj];
|
childMenuIsShow.value = true;
|
} else {
|
childMenuIsShow.value = false;
|
setCheckMenuFlag.value = null;
|
}
|
};
|
//二级菜单点击事件
|
const setChildMenuClick = (item) => {
|
var obj = menuManager.init(item);
|
childMenuIsShow.value = false;
|
setCheckMenuFlag.value = null;
|
};
|
onMounted(() => {
|
setMenuStart();
|
});
|
</script>
|
|
<style lang="less" scoped>
|
.MenuBox {
|
z-index: 40;
|
position: absolute;
|
top: 80px;
|
right: 0px;
|
border-radius: 0 6px 6px 0;
|
font-family: microsoft yahei;
|
|
.menuContent {
|
display: flex;
|
height: 40px;
|
border: 1px solid #30bcff;
|
}
|
.menuItemBox {
|
color: white;
|
background: rgba(26, 37, 23, 0.8);
|
box-shadow: inset 0px 10px 40px 10px rgba(26, 37, 23, 1);
|
line-height: 40px;
|
padding: 0px 10px;
|
font-size: 14px;
|
}
|
.menuItemBox:hover {
|
color: #30bcff;
|
}
|
.menuActive {
|
width: 0px;
|
transition: width 10s linear 10s;
|
/* Safari */
|
-webkit-transition: width 10s linear 10s;
|
}
|
.closeMenu {
|
width: 30px;
|
height: 100%;
|
background: #30bcff;
|
color: white;
|
display: flex;
|
position: relative;
|
justify-content: center;
|
align-items: center;
|
}
|
.rightMenu {
|
width: 30px;
|
height: 30px;
|
background: rgba(26, 37, 23, 0.8);
|
|
border: 1px solid #30bcff;
|
color: #30bcff;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border-radius: 5px;
|
}
|
.rightMenu:hover {
|
background: #30bcff !important;
|
color: white;
|
border: 1px solid #fff;
|
}
|
}
|
.childMenuBox {
|
padding: 10px;
|
width: auto;
|
color: white;
|
background: rgba(35, 47, 42, 0.8);
|
border: 1px solid #30bcff;
|
position: absolute;
|
z-index: 41;
|
top: 123px;
|
border-radius: 3px;
|
transform: translate(-20%, 0);
|
min-width: 52px;
|
text-align: center;
|
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
|
div {
|
height: 36px;
|
line-height: 36px;
|
font-family: microsoft yahei;
|
font-size: 12px;
|
}
|
div:hover {
|
color: #30bcff;
|
}
|
}
|
</style>
|
