项目基本架构

最新推荐文章于 2022-07-27 23:52:27 发布

踢足球的，程序猿

最新推荐文章于 2022-07-27 23:52:27 发布

阅读量92

点赞数

本文链接：https://blog.csdn.net/weixin_52630329/article/details/118092748

版权

HeaderNav.vue是一个Vue.js组件，用于创建页面头部导航。它包含一个logo、搜索框、动态显示的链接（根据用户登录状态）以及滚动监听功能，当页面滚动超过一定距离时，导航条会变为固定在顶部。组件使用Vuex进行状态管理，提供登录和退出登录功能，并通过计算属性处理导航条的位置变化。

摘要由CSDN通过智能技术生成

在这里插入图片描述

HeaderNav.vue代码示例：

   <div class="header-box">
       <header>
           <div class="top">
               <img src="../assets/logo.png" alt="">
               <!-- 搜索框 -->
               <my-search></my-search>
           </div>
       </header>
       <div class="nav-box" :class="{fix:pos=='fixed'}">
           <nav>
               <template v-if="!token">
                <router-link to="/">首页</router-link>
                <router-link to="/login">登录</router-link>
                <router-link to="/register">注册</router-link>
                <!-- 搜索框 v-show="pos=='fixed'" -->
                <my-search class="search" v-show="pos=='fixed'" ></my-search>
               </template>

               <template v-else>
                <router-link to="/">首页</router-link>
                <router-link to="/trollay">购物车</router-link>
                <router-link to="#" @click.native="loginOut">退出登录</router-link>
                <!-- 搜索框 v-show="pos=='fixed'" -->
                <my-search class="search" v-show="pos=='fixed'" ></my-search>
               </template>
           </nav>
           
       </div>
   </div>
</template>

<script>
import MySearch from "./MySearch.vue"
import {mapState} from "vuex"
export default {
    data() {
        return {
           
            // 
            pos:"static",
            // token:"",
            isLogin:false
        }
    },
    components:{
        MySearch
    },
    created() {
    },
    computed:{
        ...mapState(["token"])
    },
    mounted() {
        window.οnscrοll=()=>{
            //  scrollTop 滚动元素的偏移量 滚出去的高度
            // document.body.scrollTop 滚出去的高度
            //  document.body.scrollHeight 内容的高度
            //  document.body.clientHeight 元素的高度
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop
            if(scrollTop>120){
                this.pos = "fixed"
            }else{
                this.pos ="statci"
            }
        }
    },
    methods: {
        loginOut(){
            console.log("1111")
            this.$store.commit("setToken","")
            this.$message({
                type:"success",
                message:"退出成功"
            })
            this.$router.push("/")
        }
    },
}
</script>

<style scoped>
    .header-box{
        box-shadow: 0 2px 6px gray;
        padding-top: 20px;
        height: 180px;
        margin-bottom: 10px;
    }
    header{
         /* positon:static 静态定位 ，元素标签的默认的定位方式就是静态定位 */
         /* absolute ：离他最近的非static的祖先元素 */
         /* relative fixed sticky */
        width:1200px;
        margin: auto;
        text-align: left;
        /* position: sticky; */
    }
    /* img{
       
    } */
    .top{
        display: flex;
        justify-content: space-between;
        height: 60px;
        padding: 20px;
    }
    .nav-box{
        z-index: 1000;
        /* background-color: red; */
    }
    nav{
        width: 1200px;
        /* background-color: blue; */
        margin: auto;
        display: flex;
        text-align: left;
        position: relative;
    }
    nav a{
        margin: 20px;
        text-decoration: none;
        color:black;
        font-weight: bold;
        padding: 5px;
    }
    .search{
        position: absolute;
        right: 20px;
        top: 10px;
    }
    
    .nav a:hover,.router-link-exact-active{
        color:purple;
        text-decoration: none;
        border-bottom:1px solid purple;
    }
    .fix{
        width: 100%;
        background-color: white;
        top: 0px;
        right: 0;
        box-shadow: 0 2px 6px #999;
        position: fixed;
    }
</style>