gpt4 book ai didi

twitter-bootstrap - 在 Vuejs 单文件组件中包含 bootstrap.js 外部脚本

转载 作者:搜寻专家 更新时间:2023-10-30 22:11:45 25 4
gpt4 key购买 nike

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

我有一个 working fiddle ,但未能将其转化为工作组件。

尝试的方法:

  1. 加载 <head> 中的 3 个工具提示相关脚本标签

    • "TypeError: tooltipAnchor.tooltip is not a function"
  2. 加载 <body> 中的 3 个工具提示相关脚本标记,编译后的 vue 代码标记之前 ( build.js )

    • "TypeError: tooltipAnchor.tooltip is not a function"
  3. 加载 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);
}
...
}
  1. 要求 Chart.vue 顶部的所有三个脚本:

    • Bootstrap 无法加载,因为 jQuery不是可用的全局变量

我怀疑当我将它们放入 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com