![](/img/trans.png)
[英]Trigger button event when press enter key on Mozilla Firefox
[英]How to trigger the Enter key press event on URL hash modification?
我在<li>
元素中组织了链接。 在单击事件上,我将页面的URL更改为页面中相应的<div>
id元素。
现在,所以我正在寻找一种方法来触发makeIt()
的输入按下事件,以便我滚动到相关的<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>
如何实现这一目标?
您可以从模板传递$event
对象并将makeIt
函数修改为;
HTML :
@click="makeIt(i, $event)"
JS :
makeIt(hashbang, event) {
if (event.keyCode === 13) {
//do something
}
this.$router.push(`#${hashbang}`)
}
我不完全确定触发Enter键是正确的做法,以便向下滚动到所需的部分。
您可以考虑使用VueScrollTo处理滚动(您可以在此处找到它)。 然后就像在makeIt
方法中调用VueScrollTo.scrollTo()
一样简单。
makeIt(hashbang) {
this.$router.push(`#${hashbang}`);
VueScrollTo.scrollTo(`.section-${hashbang}`, 500);
}
以下是我将如何做的一个工作示例: jsfiddle 。
然后,您可能仍希望将索引推送到路径,以便在浏览到确切的URL时到达所选部分。
编辑我的答案以建议不同的方法:
由于您正在使用VueRouter,因此在定义路由器选项时,您可能会利用routes的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()
方法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上保存了这个解决方案的一个版本,您可能想在沙箱或本地版本的应用程序上尝试它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.