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中使用此代码，但它在控制台中显示了此消息：

未捕获的ReferenceError：未定义Waypoint

这是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安装了航点，因此您需要require在您的文件中，如下所示：

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

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

Found on the waypoints Github.

使用带有vue.js的waypoint的问题

1 个答案: