vue.js 使用航路点的问题

Question

我正在使用 vue.js，我想包括 waypoints。

我的原创、工作脚本：

html:

<div id="final">
  <h2>Mostar el mensaje al pasar por aqui</h2>
</div>

脚本：

var ele
var waypoint = new Waypoint({
  element: ele = document.getElementById('final'),
  handler: function(direction) {
    if (direction == 'down') {
      $(ele).addClass('muestra')
    } else {
      $(ele).removeClass('muestra')
    }
    console.log(direction);
  }
});

css:

.muestra {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

我正尝试在 vue.js 中使用此代码，但它在控制台中显示以下消息：

Uncaught ReferenceError: Waypoint is not defined

这是vue.js中的代码：

galeri.vue:

<template>
  <div id="final">
    <h2>Mostar el mensaje al pasar por aqui</h2>
  </div>
</template>
<script>
  var ele
  var waypoint = new Waypoint({
    element: ele = document.getElementById('final'),
    handler: function(direction) {
      if (direction == 'down') {
        $(ele).addClass('muestra')
      } else {
        $(ele).removeClass('muestra')
      }
      console.log(direction);
    }
  });
</script>

知道我做错了什么吗？

Answer 1

由于您通过 npm install waypoints 安装了 waypoints，因此您需要像这样 require 在您的文件中安装它：

<script>
require('waypoints/lib/noframework.waypoints.js')

var waypoint = new Waypoint({ 
  // ... 
})
</script>

Found on the waypoints Github.

vue.js 使用航路点的问题

Issue using waypoint with vue.js

javascript

jquery-waypoints

vue.js