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

发布时间：2020-12-17 21:33:10 所属栏目：安全来源：网络整理

导读：我正在使用几个外部库在vue应用程序中使用工具提示构建图表.我正在使用单文件组件我有一个working fiddle,但无法将其转换为工作组件. 尝试的方法：在 head中加载3个工具提示实现的脚本标签 “TypeError：tooltipAnchor.tooltip不是函数” 在 body中加载3个

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

我有一个working fiddle,但无法将其转换为工作组件.

尝试的方法：

>在< head>中加载3个工具提示实现的脚本标签

>“TypeError：tooltipAnchor.tooltip不是函数”

>在< body>中加载3个工具提示实现的脚本标记,在标记之前编译的vue代码(build.js)

>“TypeError：tooltipAnchor.tooltip不是函数”

>在挂载的挂钩中的Chart.vue组件中加载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);
  }
  ...
}

>需要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中导入/ require bootstrap：

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

...

创造和创造的方法更新工具提示现在按预期工作.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!