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

68 lines
1.4 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-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";
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);
},
},
},
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>