shop-pc/layouts/default.vue

<!--
 * @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>