Vue中的Intro.js多页导航不起作用

Question

我正在尝试通过vue-intro.js绑定使用intro.js，为我的用户创建一个能够在应用程序中浏览不同路由的自注册流程。

vue binding https://github.com/alex-oleshkevich/vue-introjs intro.js docs https://introjs.com/docs/intro/api/

我已经能够使用v-directives让它工作，但我希望通过编程导航跨多条路线实现结果。

我还尝试了不同的方法来选择元素，例如查询选择器，但都无济于事。已尝试安装/创建的各种组合。

this.$intro().addStep({
    element: '#one',
    intro: "step one",
    position: 'right',
})

this.$intro().addStep({
    element: '#two',
    intro: "step two",
    position: 'bottom'
})

this.$intro().start().oncomplete(() =>
    this.$route.push("someroute")

)

我希望能够浏览这些步骤，并在它们更改时触发oncomplete( () =>回调)，以便能够导航到不同的vue页面并继续执行入职流程。

Answer 1

我可以说的是，IntroJS对currentDOM className很敏感。一旦它们找不到特定的元素(假设您的DOM在vue中呈现较晚)，introJS将无法工作。我认为您可以尝试以其他方式编写它，使用introJS中的"data-intro“或"data-title”属性将消息直接绑定到超文本标记语言。查看他们的示例Hello-world项目--> https://introjs.com/docs/examples/basic/hello-world

谢谢