Question

我在<li>元素内组织了链接。在发生点击事件时，我将页面的URL更改为页面中相应的<div> id元素。

现在，我正在寻找一种方法来触发makeIt()中的enter press事件，以便滚动到相关的<div>元素。

这是我的代码：

<template>
<div>
  <div style="margin-top: 50px;"></div>
  <div style="margin-bottom: 50px;">
    <ul>
      <li
        v-for="i in 3"
        :key="i"
        @click="makeIt(i)"
      >
        Link{{ i }}
      </li>
    </ul>
  </div>
  <div
    v-for="i in 3"
    :id="i"
    :class="`div${i}`"
    >
    Div {{ i }}
  </div>
</div>
</template>

<script>

export default {
  methods: {
    makeIt(hashbang) {
      this.$router.push(`#${hashbang}`)
    }
  }
}
</script>

<style>
.div1 {
    background-color: red;
    height: 600px;
}

.div2 {
    background-color: blue;
    height: 500px;
}

.div3 {
    background-color: yellow;
    height: 500px;
}
</style>

如何实现这一目标？

Answer 1

您可以从模板传递int对象，并将$event函数修改为；

HTML ：

makeIt

JS ：

@click="makeIt(i, $event)"

Answer 2

我不确定完全要触发Enter键才能向下滚动到所需部分。

您可以考虑使用VueScrollTo处理滚动（您可以here找到它）。然后，就像从VueScrollTo.scrollTo()方法中调用makeIt一样简单。

makeIt(hashbang) {
  this.$router.push(`#${hashbang}`);
  VueScrollTo.scrollTo(`.section-${hashbang}`, 500);
}

这是我的工作方式示例：jsfiddle。

然后，您仍可能希望将索引推送到路线，以便在浏览到确切的URL时到达所选部分。

编辑我的答案以建议其他方法：

由于使用的是VueRouter，因此在定义路由器选项时可能会利用路由的 hash 属性和scrollBehavior()方法。这样，您可能会遇到这样的事情：

<router-link tag="li" v-for="i in 3" :key="i" :to="{ name: 'theRouteName', hash: '#section-' + i }">Link {{i}}</router-link>

这样就不需要$router.push()部分和整个makeIt()方法。

此外，您应该将滚动行为添加到路由器配置中：

const router = new VueRouter({
  routes,
  mode: "history",
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {˙
      return savedPosition;
    }
    if (to.hash) {
      return { selector: to.hash };
    }
    return { x: 0, y: 0 };
  }
});

我已将此解决方案的版本保存在jsfiddle上，您可能想在沙盒或应用程序的本地版本中尝试使用它。

如何在修改网址哈希值时触发Enter键按下事件？

2 个答案: