如何在流星 1.4.1.1 中使用 intro.js 形式的 npm 包？

Question

我正在尝试在我的流星应用程序中使用 intro.js。

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
// import introJs  from 'intro.js';
var introJs = require('intro.js');
import './main.html';

.....//some code here

Template.hello.events({
  'click button'(event, instance) {
    // increment the counter when button is clicked
    instance.counter.set(instance.counter.get() + 1);
  },

'click #introjs'(e,i){
    console.log("call me");
    introJs("#introjs").start();
  }
});

但我给了

TypeError: introJs 不是函数

我该如何解决这个问题？ 谢谢。

Answer 1

试试：introJs.introJs().start()。那会做的。 这是因为 intro.js 文件代码的编写方式，请在您的 introJs var 上使用 console.log() 检查它。 更多信息：Why does require('intro.js') export an object with just introJs?

Answer 2

在您的 html 文件中，您必须在您希望 intro 处理的任何地方添加一个 intro 元素，如 data-intro 到您的 html 元素中。

<template name=hello>
    <a href='http://google.com/' class='introjsclass' data-intro='Hello step one!'></a>
</template

确保在您的 js 文件中导入 intro.js 和 intro.css

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import introJs  from 'intro.js';
//var introJs = require('intro.js');
// you have to import the introjs css file
import '/node_modules/path to your introjs css file';
import './main.html';

.....//some code here

Template.hello.events({


'click .introjsclass':function(event){
event.preventDefault();
    console.log('call me');
    introJs('.introjsclass').start();
  }
});