javascript - 使用带有 VueJS 的产品导览库

Question

我正在尝试为我的网络应用程序设置功能介绍教程(例如 intro.js )。我在使用 intro.js 时遇到问题，没有任何反应(没有错误消息或游览消息)。我尝试设置 intro.js 使用的数据属性，并从 App.vue 上的挂载函数调用游览开始，但没有成功。我想看看是否有人有过将这样的库与 VueJS 结合使用的经验。

来自 App.vue 的代码:

mounted: function() {
  const introJS = require('intro.js')
  introJS.introJs().start()
}

在它的同一组件内部 <template> :

<div class="card card-accent-info" v-if="!isLoading" data-intro="Test step here" data-step="1">

我还在 App.vue 中加载了 css:

@import "~intro.js/minified/introjs.min.css";

Answer 1

问题可能出在您从 <style> 导入 CSS 的方式上标签。要正确应用样式，请在 JavaScript 中导入 CSS:

<!-- MyComponent.vue -->
<script>
import "intro.js/minified/introjs.min.css";

export default {
  mounted() {
    const introJS = require("intro.js");
    introJS.introJs().start();
  }
};
</script>

demo