nuxt js中未定义窗口

Question

所以，我想将样式与我从 getHeight 函数获得的另一个元素的高度绑定，但我一直收到一个错误，说窗口未定义。

有人可以给我一个解决方案吗？

这是我的源代码：

<template>
  <div class="container">
    <p class="section-title">past event</p>
    <div class="columns is-multiline">
      <div
        class="column is-one-third is-centered past-events"
        v-for="(event, index) in events.slice(0, 2)"
        :key="index"
      >
        <EventCard :event="event" />
      </div>
      <div class="column is-one-third is-centered">
        <div class="link-box" :style="{ height: getHeight() }">
          <nuxt-link to="/past-events">
            <p style="color: #ffffff; cursor: pointer" class="see-all">
              Lihat List Event Lainnya
            </p>
          </nuxt-link>
        </div>
      </div>
    </div>
    <a class="see-all-btn"> </a>
  </div>
</template>

<script>
import EventCard from "~/components/EventCard.vue";

export default {
  name: "PastEvents",
  components: {
    EventCard
  },
  props: ["events"],
  data() {
    return {};
  },
  mounted() {
    this.getHeight();
  },
  methods: {
    getHeight() {
      const height = window.getComputedStyle(
        document.querySelector(".past-events")
      ).height;
      console.log(height);
      return height + "px";
    }
  }
};
</script>

Answer 1

Nuxt 使用服务器端渲染。这意味着当您的代码在服务器上执行时，它没有像window 这样的东西。毕竟不是浏览器。

解决此问题的最简单方法是将不应预渲染为 html 的任何内容包装为 vue-no-ssr 之类的内容。这个特定的库在服务器上呈现一个虚拟组件，然后在它到达浏览器时实际呈现该组件。

Answer 2

是的，window 在 mounted 生命周期挂钩期间不存在。我假设您正在尝试根据其位置放置某些东西？

在这种情况下，您可能能够利用 CSS 为您完成这件事。您可以使用视图高度/视图宽度单位放置元素。将其与 CSS calc() 结合使用，您可能会获得所需的解决方案。

例子：

.element {
  /* make element positon relative to the window */
  position: fixed;
  /* set position - note vw/vh are % of window */
  /* this put the top of your element -200px from the bottom of your window */
  top: calc(100vh - 200px);
}

---

如果您正在做更复杂的事情，使用 Javascript 的 element.getBoundingClientRect() 可能会满足您的需求。请参阅this answer 了解更多信息。