Question

所以我正在尝试将smoothscroll实现到我的Vue.js应用程序中。

我有一个处理菜单和导航的SideBar.vue组件。

现在我只想对前2个链接实现此行为。

每个链接都应滚动到同一页面中呈现的不同组件。

到目前为止，我已尝试了大约4个插件，但没有一个有效。我无法从另一个组件正确引用div元素。例如：

<template>
<div class="sidebar-nav">
  <div @mouseover="openSideBar" @mouseleave="closeSideBar" :class="{ 'side-menu': !opened, 'side-menu side-menu-opened': opened }" role="navigation">
    <div id="ninja" class="ninja"></div>
    <div class="menu-content">
      <ul class="nav navbar-nav">
        <li>
          <div class="menu-item first-logo" @click="goIntro">
              <span class="first-item"> Home </span>
          </div>
        </li>
        <li>
          <div class="menu-item" @click="goPortfolio">
            <span class="second-item">Portfolio</span>
          </div>
        </li>
        <li>
          <div class="menu-item">
            <span class="third-item"> About </span>
          </div>
        </li>
        <li>
          <div class="menu-item">
            <span class="fourth-item"> Contact me </span>
          </div>
        </li>
        <li>
          <div class="menu-item">
            <span class="fifth-item">Blog</span>
          </div>
        </li>
    </ul>
  </div>
</div>
</div>
</template>

<script>

export default {
name: "SideBar",
data() {
  return {
    opened: false,
    options: {
      onDone: this.closeSideBar,
      onCancel: this.closeSideBar
    }
  }
},
methods: {
  openSideBar(){
    this.opened = true
  },
  closeSideBar() {
    this.opened = false
  },
  goIntro(){
    this.$scrollTo(document.getElementById("intro"), 800, this.options)
  },
  goPortfolio(){
    this.$scrollTo(document.getElementById("portfolio"), 800, this.options)
  }
}
}
</script>

这里是Intro的标记，只是为了展示一个例子：

<template>
  <section id="intro">
    <div class="intro-container">
        <h1 id="intro-shuffle"> {{intro}}</h1>
        <h1 class="welcome fadein"> {{ welcome }}</h1>
    </div>
  </section>
</template>

现在我认为问题在于SideBar组件不知道#intro和#portfolio。我已经尝试使用ref attr进行引用，但它的范围是它的当前组件。我发现在Vue.js中引用全局对象/元素似乎非常困难。

如果有经验丰富的人可以指出我采用这种全球参考的最佳方式，我当然会很感激。

这是我的HomeComponent，其中包括intro和portfolio：

<template>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <app-intro></app-intro>
        </div>
        <div class="col-xs-12">
            <hr class="neon-lights">
            <hr class="neon-lights">
            <app-portfolio></app-portfolio>
        </div>
    </div>
</div>
</template>

<script>
import Intro from './Intro'
import Portfolio from './Portfolio'

export default {
    name: "home",
    components: {
        Intro,
        Portfolio
    }
}
</script>

组件之间的SmoothScroll。 VueJs

0 个答案: