0

我有一个非常简单的 Vue JS 单文件组件，在它的挂载钩子中，我试图获取其中一个元素的 offsetTop（使用 refs）：

mounted () {
  let vm = this
  // console.log(vm.$refs.ttb.$el.offsetTop)
  let navOffset = vm.$refs.ttb.$el.offsetTop
  console.log(navOffset)
}

如果我取消注释第 2 行并将值记录到控制台，它在两个日志输出中都是正确的（在我们的例子中为 127）。然而，随着第 2 行被注释掉，它总是 0。关于为什么的任何想法？

这是模板。它有点复杂，因为要拉入图像并使用名为Quasar的 Vue UI 框架：

<template>
  <q-layout view="hhh Lpr lFf">
    <q-layout-header>
      <div class="primary">
        <img
          class="center responsive"
          alt="banner"
          src="http://someserver/api/banner"
        />
      </div>
      <q-toolbar ref="ttb"  //HERE IS THE TTB REF
        color="primary"
        :inverted="$q.theme === 'ios'"
      >
        <q-btn
          flat
          dense
          round
          @click="leftDrawerOpen = !leftDrawerOpen"
          aria-label="Menu"
        >
          <q-icon name="menu" />
          <q-tooltip>
            Main Menu
          </q-tooltip>
        </q-btn>
        <q-toolbar-title class="flex flex-center">
          My Title
          <!--<div slot="subtitle">Powered by ePapers</div>-->
        </q-toolbar-title>
        <q-btn flat round dense icon="fas fa-user">
          <q-tooltip>
            Account
          </q-tooltip>
        </q-btn>
      </q-toolbar>

    </q-layout-header>

    <q-layout-drawer
      v-model="leftDrawerOpen"
      :content-class="$q.theme === 'mat' ? 'bg-grey-2' : null"
    >
      <q-list
        no-border
        link
        inset-delimiter
      >
        <q-list-header>Essential Links</q-list-header>
        <q-item @click.native="openURL('http://quasar-framework.org')">
          <q-item-side icon="school" />
          <q-item-main label="Docs" sublabel="quasar-framework.org" />
        </q-item>
        <q-item @click.native="openURL('https://github.com/quasarframework/')">
          <q-item-side icon="code" />
          <q-item-main label="GitHub" sublabel="github.com/quasarframework" />
        </q-item>
        <q-item @click.native="openURL('https://discord.gg/5TDhbDg')">
          <q-item-side icon="chat" />
          <q-item-main label="Discord Chat Channel" sublabel="https://discord.gg/5TDhbDg" />
        </q-item>
        <q-item @click.native="openURL('http://forum.quasar-framework.org')">
          <q-item-side icon="record_voice_over" />
          <q-item-main label="Forum" sublabel="forum.quasar-framework.org" />
        </q-item>
        <q-item @click.native="openURL('https://twitter.com/quasarframework')">
          <q-item-side icon="rss feed" />
          <q-item-main label="Twitter" sublabel="@quasarframework" />
        </q-item>
      </q-list>
    </q-layout-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

更新：好的，我们已经将其隔离了一点，但仍然没有最终解决方案。似乎是我们删除了横幅图像，这按预期工作。因此，我们假设 img src 中的 http 是异步的，并在完成后将 ttb ref 元素向下移动，并且在我们得到它的偏移量之后。任何想法如何解决这个问题？

4

1 回答 1

0

好的 - 我们想通了，这就是我们所做的。我们将滚动位置的检查移至从 img 加载事件中调用的方法：

<div class="banner">
  <!-- MOVED CHECK TO getScroll METHOD CALL FROM IMG LOAD -->
  <img
    @load="setScroll"
    class="center responsive"
    alt="banner"
     src="http://localhost:8000/api/apec2018/banner"
   />
 </div>

然后在那个方法中，scrollPos 是正确的：

methods: {
  getScroll () {
    let h = document.getElementById('ttb')
    let scrollPos = h.offsetTop
    console.log(scrollPos)
  }
}
于 2018-07-13T13:01:25.490 回答