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

使用带VueJS的产品浏览库

1 个答案: