5

我正在使用几个外部库在 vue 应用程序中构建带有工具提示的图表。我正在使用单文件组件

我有一个工作小提琴，但无法将它翻译成一个工作组件。

尝试的方法：

  1. <head>在标签中加载 3 个 tooltip-realted 脚本

    • "TypeError: tooltipAnchor.tooltip is not a function"

  2. 加载标签中的 3 个 tooltip-realted 脚本<body>，在已编译 vue 代码的标签之前 ( build.js)

    • "TypeError: tooltipAnchor.tooltip is not a function"

  3. 在钩子中的Chart.vue组件中加载 3 个 tooltip-realted 脚本mounted

    • "TypeError: tooltipAnchor.tooltip is not a function"

图表.vue：

mounted: function mounted() {
  this.loadJS('https://code.jquery.com/jquery-3.2.1.slim.min.js')
  .then(() => {
    console.log('jquery loaded');
    return this.loadJS('https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js');
  })
  .then(() => {
    console.log('popper loaded');
    return this.loadJS('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js')
  })
  .then(() => {
    console.log('bootstrap loaded');
    this.buildChart();
  });
},
methods: {
  loadJS: function loadJS(url) {
    return this.$http.get(url);
  }
  ...
}

  1. 要求所有三个脚本都位于顶部Chart.vue：

    • Bootstrap 无法加载，因为jQuery它没有可用的全局变量

我怀疑当我将它们放入时加载的订单脚本有问题index.html，但我不知道是什么。有谁知道jsfiddle如何编译它的html？我还缺少什么？

4

2 回答 2

6

终于找到了解决办法：

将 jquery 包含在index.html：

<body>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <div id="app"></div>
  <!-- inject:js -->
  <script src="/js/build.js"></script>
  <!-- endinject -->
</body>

并在 vue 组件中导入/需要引导程序Chart.vue：

<template>
    <div id="chart"></div>
</template>
<script type="text/javascript">
  var d3 = require('d3');
  var Plottable = require('plottable');
  var bootstrap = require('bootstrap');

...

创建和更新工具提示的方法现在可以按预期工作。

于 2017-10-18T13:24:09.420 回答
0

似乎您正在向这些 JS 文件发出 ajax 请求，但是您没有对响应做任何事情？更好的方法是

  1. 将文件下载到本地
  2. 将它们放在与单个文件组件相同的目录中
  3. 导入组件正上方的本地文件

```

<script>
  // assuming you're using a transpiler? use appropriate syntax here
  import './popper.min'
  import './bootstrap.min';

  var vm = new Vue({
  el: '#app',
  data: {
    data_2017: [{
    x: '6th Grade',
    y: 12
  }, // ...

```

于 2017-10-18T12:29:57.463 回答