item-management-vant/src/views/home/components/NavBar.vue

<template>
  <div class="navbar" :class="navBarFixed == true ? 'navbarFixed' :'navbarRelative'">
    <div class="titleDiv">
      <img class="logclass" src="@/assets/images/logo.png" />
    </div>
    <div class="loginUser" v-if="userStore.userInfo">
      <div style="margin-right: 10px;display: inline-block">
        <van-icon name="envelop-o" size="28" />
      </div>
      <span class="nameSpan">{{ userStore.userInfo.name }}</span>
      <svg @click="logout()" t="1748245580960" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5746" width="28" height="28">
        <path
          d="M512 929.959184c-199.053061 0-361.012245-161.959184-361.012245-361.012245 0-130.612245 71.053061-251.297959 184.946939-315.559184 9.926531-5.746939 22.987755-2.089796 28.212245 7.836735 5.746939 9.926531 2.089796 22.987755-7.836735 28.212245-100.832653 56.42449-163.526531 163.526531-163.526531 278.987755 0 176.065306 143.15102 319.216327 319.216327 319.216326s319.216327-143.15102 319.216327-319.216326c0-115.461224-62.693878-222.563265-163.526531-278.987755-9.926531-5.746939-13.583673-18.285714-7.836735-28.212245 5.746939-9.926531 18.285714-13.583673 28.212245-7.836735 113.893878 63.738776 184.946939 184.946939 184.946939 315.036735 0 199.57551-161.959184 361.534694-361.012245 361.534694z"
          fill="#2c2c2c"
          p-id="5747"
        />
        <path
          d="M512 135.836735c-26.122449 0-47.020408 20.897959-47.020408 47.020408v229.877551c0 26.122449 20.897959 47.020408 47.020408 47.020408s47.020408-20.897959 47.020408-47.020408V182.857143c0-26.122449-20.897959-47.020408-47.020408-47.020408z"
          fill="#2c2c2c"
          p-id="5748"
        />
      </svg>
    </div>
  </div>
</template>
  
<script>
import { mapStores } from 'pinia';
import { useUserStore } from '@/stores/useUserStore';
import { removeToken } from '@/utils/auth';

export default {
  props: {},
  data() {
    return {
      navBarFixed: false,
    };
  },
  mounted() {
    // 监听屏幕滚动
    window.addEventListener('scroll', this.watchScroll);
  },
  computed: {
    ...mapStores(useUserStore),
  },
  methods: {
    async logout() {
      // 移除token
      removeToken();
      // 移除用户信息缓存
      this.userStore.removeUserInfo();
      this.$router.push('/index/login');
    },
    watchScroll() {
      // 当滚动超过 120px 时，实现吸顶效果(滚动条高度当前设置为：120px)
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop > 120) {
        this.navBarFixed = true;
      } else {
        this.navBarFixed = false;
      }
    },
  },
};
</script>

<style scoped>
.navbarRelative {
  width: 100%;
  height: 60px;
  position: relative; 
  background-color: #F7F8FA;
  border-bottom: 1px #d7d7d7 solid;
}

.navbarFixed {
  width: 100%;
  height: 60px;
  background-color: #F7F8FA;
  border-bottom: 1px #d7d7d7 solid;
  position: fixed;
  top: 0;
  z-index: 999;
}

.logclass {
  float: left;
  height: 40px;
  margin-top: 10px;
  margin-left: 10px;
}
.logclass:hover {
  cursor: pointer;
}
.titleDiv {
  width: 37.5%;
  height: 100%;
  float: left;
}
.loginUser {
  height: 61px;
  display: flex;
  align-items: center;
  float: right;
  padding-right: 10px;
}
.nameSpan {
  padding-right: 5px;
}
</style>