代码之家 › 专栏 › 技术社区 › ebbishop

包括引导。Vuejs单文件组件中的js外部脚本

plottable jsfiddle bootstrap-4 vue.js twitter-bootstrap

ebbishop · 技术社区 · 7 年前

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

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

尝试的方法:

在中加载3个工具提示实时脚本 <head> 标签
- "TypeError: tooltipAnchor.tooltip is not a function"
在中加载3个工具提示实时脚本 <body> 标记,在已编译vue代码的标记之前( build.js )
在中加载3个工具提示实时脚本 Chart.vue mounted 钩
- “TypeError:tooltipAnchor.tooltip不是函数”

图表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);
  }
  ...
}

需要所有三个脚本位于 图表vue
- 引导无法加载,因为 jQuery 不是全局变量吗

index.html ,但我不知道是什么。有人知道jsfiddle是如何编译其html的吗?我还错过了什么?

2 回复 | 直到 7 年前

ebbishop 7 年前

最终找到了解决方案:

在中包含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>

Chart.vue :

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

...

创建和;更新工具提示现在按预期工作。

xaksis 7 年前

看起来您正在对这些JS文件发出ajax请求,但是您没有对响应做任何事情? 更好的方法是

本地下载文件
导入组件正上方的本地文件

```

<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
  }, // ...

推荐文章

seriously · 按钮中元素的对齐

2 年前

USK · 引导模型在我的HTML文件中不起作用

2 年前

onit · 如何在单击按钮时从页面(引导程序4)隐藏或删除搜索表单?

2 年前

Noor ul ain Ibrahim · 如何在一行中制作两个大小相同的按钮?

2 年前

user9644796 · 如何检查折叠的导航栏是否打开?

6 年前

JoeSlav · 使用引导上载损坏的文件

6 年前

John · 引导程序4,表单内联未在XS视图上对齐

6 年前

J. Sparks · 奇怪的图像定位(HTML、CSS、Bootstrap)

6 年前

user9719859 · 如何在bootstrap 4中更改选择选项programmaticaly?

6 年前

im5an · 如何使用angular在单行中显示徽标和导航栏?

6 年前