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