ebb*_*hop 5 jsfiddle twitter-bootstrap vue.js plottable.js bootstrap-4
我正在使用几个外部库在vue应用程序中使用工具提示构建图表.我正在使用单文件组件
我有一个工作小提琴,但无法将其翻译成一个工作组件.
在<head>标记中加载3个工具提示实现的脚本
"TypeError: tooltipAnchor.tooltip is not a function"在<body>标记之前加载3个工具提示实现的脚本,然后标记为已编译的vue代码(build.js)
"TypeError: tooltipAnchor.tooltip is not a function"Chart.vue在mounted钩子中的组件中加载3个工具提示实现的脚本
"TypeError: tooltipAnchor.tooltip is not a function"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);
}
...
}
需要顶部的所有三个脚本Chart.vue:
jQuery它不是可用的全局变量我怀疑订单脚本加载时出现了问题index.html,但是我不知道是什么.有谁知道jsfiddle如何编译其HTML？我还缺少什么？
终于找到了解决办法：
将 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');
...
创建和更新工具提示的方法现在按预期工作。
| 归档时间： |
|
| 查看次数： |
3305 次 |
| 最近记录： |