在前端开发过程中，我们常常会有需要让页面滚动到指定位置的需求。针对这一需求，有许多第三方库被开发出来来满足开发者的需要。今天，我们介绍的npm包 @movilizame/vue-jumper 是一个专门为Vue.js专门定制的可用于快速生成滚动到标记的指令。
安装
我们可以通过npm来安装 @movilizame/vue-jumper
npm install @movilizame/vue-jumper
引入
要使用 @movilizame/vue-jumper，我们需要先将它引入到Vue实例中。可以在main.js中引入它同时注册插件。
import Vue from 'vue'; import Jumper from '@movilizame/vue-jumper'; Vue.use(Jumper);
使用
通过引入 @movilizame/vue-jumper，我们现在可以在Vue组件的模板中使用 v-jumper 指令。
-- -------------------- ---- -------
----------
-----
--- ------------------------
---
----- ----- ----- --- ---- ----------- ----------- ----- ----- -------------------- ------------------- --- ----
-------- -------- ----- ---------- ----------- ----- ------ ----------- -- ------ ------- ----- ------------
----- ----------- ----- ----- ---------
----
-- -------------------------
------
-----------上述代码中，我们在 h1 标签中添加了 v-jumper:top 指令来指定页面在到达该标记时滚动到页面的顶部；在 span 标签中，我们又添加了 v-jumper:lorem 指令，当页面滚动到该标记时就会跳转到 span 标签所在的位置；最后，我们在 a 标签中添加了 v-jumper:bottom 指令，以指定页面在到达该标记时滚动到页面的底部。
示例代码
-- -------------------- ---- -------
----------
-----
---- ------- ---
--- ------------------------
---
---- ------- ---
----- ----- ----- --- ---- ----------- ----------- ----- ----- -------------------- ------------------- --- ----
-------- -------- ----- ---------- ----------- ----- ------ ----------- -- ------ ------- ----- ------------
----- ----------- ----- ----- ---------
----
---- ------- ---
-- -------------------------
------
-----------
--------
------ ------- -
----- ------
--------- ---
--
---------通过本文的介绍，相信大家已经能够掌握使用 @movilizame/vue-jumper 的方法，在项目中高效、快速地完成页面滚动到指定位置的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcc967216659e2447ea