companyManagement项目nav导航栏公共组件

一、nav是什么？

是一个用来帮助浏览web的工具

二、代码

1.引入库

代码如下（示例）：

<template>
  <div id="headerNav">
    <div class="frame">
      <div class="frame_img-div">
        <img src="../assets/svg/wohenshuai.svg" height="40" class="title_svg" />
      </div>
      <div class="title_nav">
        <div class="next" style="margin-right: 10px;">
          <img src="../assets/svg/prev.svg" height="30px" />
        </div>
        <div class="navItems">
          <div v-for="(item, index) in routes" :key="index" @click="navGo(item, index)">
            <div
              v-if="item.meta.requiresAuth === 'home' || item.meta.requiresAuth === 'menuManagement'"
              :class="navIndex === index ? 'title_nav-children_exmple' : 'title_nav-children'"
            >{{item.name}}</div>
          </div>
        </div>
        <div class="next" style="margin-left: 10px;">
          <img src="../assets/svg/next.svg" height="30px" />
        </div>
      </div>
      <div class="right">
        <div class="tool">
          <div class="shengri">
            <img
              src="../assets/svg/shengrikuaile.svg"
              height="33"
              v-if="status.shengri"
              @click="status.shengri = false"
            />
            <img src="../assets/svg/shengri.svg" height="33" v-else />
          </div>
          <div class="xiaoxi">
            <img
              src="../assets/svg/weiduxiaoxi.svg"
              height="33"
              v-if="status.xiaoxi"
              @click="status.xiaoxi = false"
            />
            <img src="../assets/svg/xiaoxi.svg" height="33" v-else />
          </div>
          <div class="zhinengkefu">
            <img
              src="../assets/svg/kefuxiaoxi.svg"
              height="33"
              v-if="status.kefu"
              @click="status.kefu = false"
            />
            <img src="../assets/svg/智能客服.svg" height="33" v-else />
          </div>
          <el-popover placement="bottom" width="200" trigger="hover">
            <p>确认退出？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="visible = false">取消</el-button>
              <el-button type="primary" size="mini" @click="signOut">确定</el-button>
            </div>
            <div class="userInfo" slot="reference">
              <img src="../assets/svg/wohenshuai.svg" height="40" class="title_svg_user" />
              <div class="destri">
                <div class="name">陈独秀</div>
                <div class="signature">一日看尽长安花</div>
              </div>
            </div>
          </el-popover>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapMutations } from "vuex";
export default {
  name: "headerNav",
  data() {
    return {
      navIndex: 0,
      status: {
        shengri: false,
        kefu: false,
        xiaoxi: false,
      },
    };
  },
  computed: {
    routes() {
      return this.$router.options.routes[1].children;
    },
    ...mapGetters(["getNavIndex"]),
  },
  mounted() {
    this.navGo(this.routes[0], 0);
    this.changeRoutes(this.routes);
    this.timer = setInterval(this.getState, 15000);
  },
  destroyed() {
    clearInterval(this.timer);
  },
  methods: {
    getState() {
      let promise = new Promise((resolve, reject) => {
        let ran1 = Math.ceil(Math.random() * 2),
          ran2 = Math.ceil(Math.random() * 2),
          ran3 = Math.ceil(Math.random() * 2);
        let res = {
          shengri: undefined,
          kefu: undefined,
          xiaoxi: undefined,
        };
        if (ran1 === 1) {
          res.shengri = true;
        }
        if (ran2 === 1) {
          res.kefu = true;
        }
        if (ran3 === 1) {
          res.xiaoxi = true;
        }
        resolve(res);
      });
      promise.then((res) => {
        if (!this.status.shengri) {
          this.status.shengri = res.shengri;
        }
        if (!this.status.kefu) {
          this.status.kefu = res.kefu;
        }
        if (!this.status.xiaoxi) {
          this.status.xiaoxi = res.xiaoxi;
        }
      });
    },
    signOut() {
      this.$router.replace({
        path: "/",
      });
    },
    navGo(item, index) {
      this.changeIndex(index);
      this.$router.replace(item.path);
    },
    changeIndex(index) {
      this.navIndex = index;
    },
    ...mapMutations(["changeRoutes"]),
  },
};
</script>
<style lang="scss" scoped>
#headerNav {
  height: 50px;
  width: 100%;
  display: flex;
  justify-content: center;
  .frame {
    position: relative;
    display: flex;
    align-items: center;
    background: white;
    height: 100%;
    width: 80%;
    .frame_img-div {
      padding-top: 2px;
      .title_svg {
        margin-left: 15px;
      }
    }
    .title_nav {
      height: 100%;
      width: calc(100% - 280px - 40px);
      margin-left: 15px;
      display: flex;
      .navItems {
        width: calc(100% - 60px);
        overflow: auto;
        display: flex;
        .title_nav-children {
          font-family: "Satisfy", cursive;
          font-size: 17px;
          display: inline-block;
          height: 100%;
          width: 100px;
          text-align: center;
          line-height: 50px;
          font-weight: bold;
          cursor: pointer;
        }
        .title_nav-children:hover {
          font-size: 19px;
          background: #95a5a6;
        }
        .title_nav-children_exmple {
          font-family: "Satisfy", cursive;
          font-size: 17px;
          display: inline-block;
          height: 100%;
          width: 100px;
          text-align: center;
          line-height: 50px;
          font-weight: bold;
          cursor: pointer;
          background: black;
          color: white;
          border-radius: 5px;
        }
      }
      .next {
        height: 40px;
        position: relative;
        top: 5px;
        cursor: pointer;
        border: none;
        transition: all 0.3s ease;
        overflow: hidden;
        img {
          position: relative;
          top: 5px;
        }
      }
      .next:after {
        position: absolute;
        content: " ";
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #1fd1f9;
        background-image: linear-gradient(315deg, #1fd1f9 0%, #b621fe 74%);
        transition: all 0.3s ease;
      }
      .next:hover {
        background: transparent;
        box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, 0.5),
          -4px -4px 6px 0 rgba(116, 125, 136, 0.2),
          inset -4px -4px 6px 0 rgba(255, 255, 255, 0.5),
          inset 4px 4px 6px 0 rgba(116, 125, 136, 0.3);
        color: #fff;
      }
      .next:hover:after {
        -webkit-transform: scale(2) rotate(180deg);
        transform: scale(2) rotate(180deg);
        box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, 0.5),
          -4px -4px 6px 0 rgba(116, 125, 136, 0.2),
          inset -4px -4px 6px 0 rgba(255, 255, 255, 0.5),
          inset 4px 4px 6px 0 rgba(116, 125, 136, 0.3);
      }
    }
    .right {
      height: 100%;
      width: 280px;
      position: relative;
      .tool {
        position: relative;
        .shengri {
          cursor: pointer;
          position: absolute;
          top: 6px;
        }
        .xiaoxi {
          cursor: pointer;
          position: absolute;
          top: 8px;
          left: 40px;
        }
        .zhinengkefu {
          cursor: pointer;
          position: absolute;
          top: 8px;
          left: 80px;
        }
        .userInfo {
          position: absolute;
          left: 124px;
          top: 2px;
          display: flex;
          padding-right: 2px;
          cursor: pointer;
          .title_svg_user {
          }
          .destri {
            text-align: left;
            font-size: 14px;
            .name,
            .signature {
              font-weight: bold;
            }
          }
        }
        .userInfo:hover {
          box-shadow: 2px 2px 3px #bdc3c7;
        }
      }
    }
  }
}
</style>

暂时没有后端，在前端写了一个promise异步获取状态，一个shengri、xiaoxi、kefu

总结

good