Xf-association/src/components/nav-tab/index.vue

<template>
  <div style="height: 60px; flex-shrink: 0" ref="pronbit">
    <div class="navbar" :class="fix ? 'navbar_fix' : ''">
      <!--导航栏-->
      <div class="nav_box center_1200">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#3975C6"
          text-color="#fff"
          active-text-color="#fff"
          router
        >
          <template v-for="(item, index) in $store.state.asyncRouter">
            <el-menu-item
              v-if="!item.ChildList || item.ChildList.length <= 0"
              :index="
                item.MenuId === 1
                  ? 'home'
                  : item.WebUrl
                  ? null
                  : `menuList?ParentId=${item.ParentId}&MenuId=${item.MenuId}`
              "
              ><a
                v-if="item.WebUrl && item.MenuId !== 1"
                :href="item.WebUrl"
                target="_blank"
                style="color: #fff; display: block"
                >{{ item.Name }}</a
              ><span v-else>{{ item.Name }}</span></el-menu-item
            >
            <el-submenu
              v-else
              :index="`menuList?ParentId=${item.ParentId}&MenuId=${item.MenuId}`"
            >
              <template slot="title">{{ item.Name }}</template>
              <template v-for="(items, indexs) in item.ChildList">
                <el-menu-item
                  v-if="items.Type === 2"
                  :key="indexs"
                  :index="
                    items.WebUrl
                      ? null
                      : `menuList?ParentId=${items.ParentId}&MenuId=${items.MenuId}`
                  "
                  ><a
                    v-if="items.WebUrl"
                    :href="items.WebUrl"
                    target="_blank"
                    style="color: #fff; display: block"
                    >{{ items.Name }}</a
                  ><span v-else>{{ items.Name }}</span></el-menu-item
                ><el-submenu
                  v-else
                  :index="`menuList?ParentId=${items.ParentId}&MenuId=${items.MenuId}`"
                >
                  <template slot="title">{{ items.Name }}</template>
                  <template v-for="(itemsxt, indexsxt) in items.ChildList">
                    <el-menu-item
                      :index="
                        itemsxt.WebUrl
                          ? null
                          : `menuList?ParentId=${itemsxt.ParentId}&MenuId=${itemsxt.MenuId}`
                      "
                      ><a
                        v-if="itemsxt.WebUrl"
                        :href="itemsxt.WebUrl"
                        target="_blank"
                        style="color: #fff; display: block"
                        >{{ itemsxt.Name }}</a
                      ><span v-else>{{ itemsxt.Name }}</span></el-menu-item
                    >
                  </template>
                </el-submenu>
              </template>
            </el-submenu>
          </template>
        </el-menu>
        <!-- <div>
          <el-button size="medium" v-if="$store.state.token" @click="userInfo"
            >个人中心</el-button
          >
          <el-button size="medium" v-else @click="login">登录</el-button>
        </div> -->
      </div>
    </div>
    <div class="backTopBtn" v-if="fix" @click="scollTop">
      <img src="@/assets/images/backTopimg.png" alt="" />
    </div>
    <login-dialog ref="login"></login-dialog>
    <user-info ref="userInfo"></user-info>
  </div>
</template>

<script>
import loginDialog from "@/components/login-dialog/index.vue";
import userInfo from "@/components/userInfo/index.vue";
export default {
  components: { loginDialog, userInfo },
  data() {
    return {
      activeIndex: "home",
      fix: false,
      scrollTimer: null,
    };
  },
  watch: {
    $route: {
      handler: function (val, oldVal) {
        this.activeIndex = val.fullPath.substring(1);
      },
      // 深度观察监听
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll); // 监听页面滚动
    console.log("$store.state.asyncRouter", this.$store.state.asyncRouter);
  },
  methods: {
    userInfo() {
      this.$refs.userInfo.showInit();
    },
    login() {
      this.$refs.login.showInit();
    },
    scollTop() {
      clearInterval(this.scrollTimer);
      this.scrollTimer = setInterval(() => {
        const top = document.documentElement.scrollTop;
        const speed = top / 10;
        if (document.documentElement.scrollTop !== 0) {
          document.documentElement.scrollTop -= speed;
        } else {
          clearInterval(this.scrollTimer);
        }
      }, 16);
    },
    handleScroll() {
      if (this.$refs.pronbit.getBoundingClientRect().top <= 0) {
        this.fix = true;
      } else {
        this.fix = false;
      }
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style lang="scss" scoped>
// ::v-deep .el-menu-item,
// ::v-deep .el-submenu__title {
//   font-size: 20px;
// }
::v-deep .el-menu-item * {
  vertical-align: unset;
}
::v-deep .el-submenu > .el-submenu__title {
  font-size: 20px;
}
.el-menu--horizontal > .el-menu-item {
  font-size: 20px;
}
::v-deep .el-menu.el-menu--horizontal {
  flex-shrink: 0;
}
.backTopBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s;
  cursor: pointer;
  user-select: none;
  background-color: #fff !important;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
  z-index: 9999;
  & > img {
    padding: 10px;
    width: 100%;
    height: 100%;
  }
  &:hover {
    transform: scale(1.2);
  }
}
::v-deep .el-submenu__title i {
  color: #fff;
}
.navbar {
  height: 60px;
  font-size: 20px;
  background-color: #3975c6;
  & > .nav_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.navbar_fix {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 333;
}
::v-deep .el-menu.el-menu--horizontal {
  border-bottom: none;
}
</style>