功能添加

suerprisePlus

2024-06-13 28de79b44655118b1deffb5c9a8b06ec2904905b

 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>