logo标签列表

在Vuejs单文件组件中引入bootstrap.js外部脚本

twitter-bootstrapvue.jsbootstrap-4jsfiddleplottable
5
我正在使用几个外部库在vue应用程序中构建具有工具提示的图表。我正在使用单文件组件。
我有一个可运行的fiddle，但无法将其转换为工作组件。
尝试的方法：
1. 在标签中加载3个工具提示相关脚本 - "TypeError: tooltipAnchor.tooltip不是一个函数"
2. 在标签中，在编译后的vue代码（build.js）之前加载3个工具提示相关脚本 - "TypeError: tooltipAnchor.tooltip不是一个函数"
3. 在Chart.vue组件中，在mounted挂钩中加载3个工具提示相关脚本 - "TypeError: tooltipAnchor.tooltip不是一个函数"

Chart.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 吗？还有什么遗漏吗？

你试过用 vue-strap 吗？它是一个为 Vuejs 提供内置组件的 Boostrap 库，不需要安装 jQuery。你可以在 http://yuche.github.io/vue-strap/ 找到更多信息。 - ricardoorellana
由于我正在使用其他库，我不确定 vue-strap 如何工作。提示工具锚点需要附加到一个 SVG 上。 - ebbishop
2个回答
6

终于找到解决方案：

在 index.html 中包含 jquery ：

<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中导入/引用bootstrap：

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

...

现在创建和更新工具提示的方法已经按预期工作。
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
  }, // ...

```

我也尝试过这个 - 请参见我的问题中的＃4。我正在尝试组合一个单文件组件，因此语法略有不同，但仅仅需要/导入正确的库并不能起作用。从文档中也不清楚我应该如何实例化bootstrap工具提示。 - ebbishop
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接