1

WX

2023-09-08 5a4c6108b5c30d22d41d614c6212711607920c92

 src/views/menus.vue

@@ -24,10 +24,25 @@
          class="menus_btn_c_list"
          v-for="(v, j) in item.child"
          :key="j"
          @click="setMenuChildClick(v)"
          @click.stop="setMenuChildClick(v)"
          :class="{ child_Menu_Options: childMenuOptions == v.id }"
        >
          {{ v.name }}
          <div
            class="menus_btn_c_list_chlid"
            v-if="v.child"
            v-show="childMenuOptions == v.id"
          >
            <div
              class="menus_btn_c_list_chlid_list"
              v-for="(e, k) in v.child"
              :key="k"
              :class="{ child_Menu_Options: checkMenuChildFlag == e.id }"
              @click.stop="setMenuTreeChildClick(e)"
            >
              {{ e.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
@@ -41,35 +56,78 @@
export default {
  setup(props, { emit }) {
    const checkMenuFlag = ref("f1");

    let checkMenuChildFlag = ref("");
    let menuOptions = ref([]);
    let childMenuOptions = ref("");
    const setMenuClick = (res) => {
      if (checkMenuFlag.value && checkMenuFlag.value == res.id) {
        checkMenuFlag.value = null;

        if (childMenuOptions.value != null) {
          if (childMenuOptions.value[0] == res.id[0]) {
            childMenuOptions.value = null;
            emit("menusData", { id: null, isActive: false });
            menuTool.clearLeftTools(res);
          }

          if (checkMenuChildFlag.value != null) {
            if (checkMenuChildFlag.value[0] == res.id[0]) {
              checkMenuChildFlag.value = null;
              // emit("menusData", { id: null, isActive: false });
              // menuTool.clearLeftTools(res);
            }
          }
        }
        res.isActive = false;
      } else {
        if (childMenuOptions.value != null) {
          menuTool.clearLeftTools({ id: childMenuOptions.value });

          emit("menusData", { id: null, isActive: false });
          childMenuOptions.value = null;
          if (checkMenuChildFlag.value != null) {
            menuTool.clearLeftTools({ id: checkMenuChildFlag.value });
            checkMenuChildFlag.value = null;
          }
        }
        // menuTool.thematicTools(res);
        checkMenuFlag.value = res.id;
        res.isActive = true;

        // menuTool.thematicTools(res);
      }
      emit("menusData", res);
    };
    const setMenuChildClick = (res) => {
      if (childMenuOptions.value && childMenuOptions.value == res.id) {
        if (checkMenuChildFlag.value != null) {
          if (checkMenuChildFlag.value[0] == res.id[0]) {
            checkMenuChildFlag.value = null;
            emit("menusData", { id: null, isActive: false });
            menuTool.clearLeftTools(res);
          }
        }
        childMenuOptions.value = null;
        menuTool.clearLeftTools(res);
        res.isActive = false;
      } else {
        if (checkMenuChildFlag.value) {
          checkMenuChildFlag.value = null;
          emit("menusData", { id: null, isActive: false });
          menuTool.clearLeftTools(res);
        }
        childMenuOptions.value = res.id;
        menuTool.leftTools(res);
        res.isActive = true;
      }
      emit("menusData", res);
    };
    const setMenuTreeChildClick = (res) => {
      if (checkMenuChildFlag.value && checkMenuChildFlag.value == res.id) {
        checkMenuChildFlag.value = null;

        menuTool.clearLeftTools(res);
        res.isActive = false;
      } else {
        checkMenuChildFlag.value = res.id;
        menuTool.leftTools(res);
        res.isActive = true;
      }
@@ -84,6 +142,8 @@
      childMenuOptions,
      setMenuClick,
      setMenuChildClick,
      checkMenuChildFlag,
      setMenuTreeChildClick,
    };
  },
};
@@ -150,12 +210,41 @@
        line-height: 64px;
        border-radius: 5px;
        padding: 0 12px;
        position: relative;
        .menus_btn_c_list_chlid {
          position: absolute;
          width: 280px;
          // height: 200px;
          background: url("../assets/img/sj.png") no-repeat center;
          background-size: 100% 100%;
          right: -320px;
          top: 50%;
          transform: translateY(-50%);
          padding: 43px 42px 52px 56px;
          box-sizing: border-box;
          .menus_btn_c_list_chlid_list {
            width: 100%;
            font-size: 30px;
            font-family: JLinXin;
            font-weight: 600;
            color: #ffffff;
            white-space: nowrap;
            cursor: pointer;
            line-height: 64px;
            border-radius: 5px;
            text-align: center;
            // padding: 0 12px;
          }
          .menus_btn_c_list_chlid_list:hover {
            background: rgba(49, 180, 255, 0.4);
          }
        }
      }
      .menus_btn_c_list:hover {
        background: rgba(0, 6, 80, 0.4);
        background: rgba(49, 180, 255, 0.4);
      }
      .child_Menu_Options {
        background: rgba(0, 6, 80, 0.4);
        background: rgba(49, 180, 255, 0.4);
      }
    }
  }