You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
shop-pc/layouts/default.vue

82 lines
1.8 KiB

<!--
* @Author: ch
* @Date: 2022-05-04 17:56:39
* @LastEditors: ch
* @LastEditTime: 2022-05-08 15:53:49
* @Description: file content
-->
<template>
<div class="layout">
<BsLogin :visible.sync="loginVisible" />
<Header
:is-categroy-open="isHomePage"
:hide-bar-line="isHomePage"
:show-categroy-tab="showCategroyTab"
:is-sticky="isSticky"
/>
<Nuxt />
<Footer />
</div>
</template>
<script>
import BsLogin from "@/components/BsLogin.vue";
import Header from "./module/header/index.vue";
import Footer from "./module/footer/index.vue";
const CATEGROY_HIDE_PAGES = [/\/account/]; // 隐藏热门分类tab的页面
export default {
name: "Layout",
components: { Header, Footer, BsLogin },
data() {
return {
isSticky: false,
ticking: false,
};
},
computed: {
loginVisible: {
get() {
return this.$store.state.loginVisible;
},
set(val) {
this.$store.commit("setLoginVisible", val);
},
},
isHomePage() {
return this.$route.path === "/";
},
showCategroyTab() {
return !CATEGROY_HIDE_PAGES.some((reg) => {
return reg.test(this.$route.path);
});
},
},
mounted() {
// 监听滚动事件
window.addEventListener("scroll", this.scrollEventMethod);
},
destroyed() {
window.removeEventListener("scroll", this.scrollEventMethod);
},
methods: {
scrollEventMethod(e) {
const that = this;
// 节流
if (!that.ticking) {
window.requestAnimationFrame(function () {
that.ticking = false;
that.isSticky = window.scrollY > 300;
});
that.ticking = true;
}
},
},
};
</script>
<style lang="scss" scoped>
.layout-footer {
height: 189px;
background: #ddd;
}
</style>