From 28de79b44655118b1deffb5c9a8b06ec2904905b Mon Sep 17 00:00:00 2001
From: suerprisePlus <15810472099@163.com>
Date: 星期四, 13 六月 2024 17:38:24 +0800
Subject: [PATCH] 功能添加
---
src/components/map/layerMenu.vue | 350 +++++++++++++++++++++++++++++-----------------------------
1 files changed, 176 insertions(+), 174 deletions(-)
diff --git a/src/components/map/layerMenu.vue b/src/components/map/layerMenu.vue
index 047ca23..02e9e72 100644
--- a/src/components/map/layerMenu.vue
+++ b/src/components/map/layerMenu.vue
@@ -1,174 +1,176 @@
-<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;
-};
-// 鑿滃崟鍒濆鍖�
-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>
+<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>
--
Gitblit v1.9.3