我正在使用多个外部库在 vue 应用程序中构建带有工具提示的图表。我正在使用单文件组件
我有一个 working fiddle ，但未能将其转化为工作组件。
尝试的方法:
加载
<head>中的 3 个工具提示相关脚本标签-
"TypeError: tooltipAnchor.tooltip is not a function"
-
加载
<body>中的 3 个工具提示相关脚本标记，编译后的 vue 代码标记之前 (build.js)-
"TypeError: tooltipAnchor.tooltip is not a function"
-
加载
Chart.vue中的 3 个工具提示相关脚本mounted中的组件 Hook-
"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);
}
...
}
要求
Chart.vue顶部的所有三个脚本:- Bootstrap 无法加载，因为
jQuery不是可用的全局变量
- Bootstrap 无法加载，因为
我怀疑当我将它们放入 index.html 时加载的订单脚本有问题，但我不知道是什么。有谁知道 jsfiddle 是如何编译它的 html 的？我还缺少什么？
最佳答案
终于找到了解决办法:
在 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');
...
创建和更新工具提示的方法现在可以按预期工作。
关于twitter-bootstrap - 在 Vuejs 单文件组件中包含 bootstrap.js 外部脚本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46797130/