Question

我是 vue.js 的新手，并不是一个真正的js人，但是我猜是这样。我需要将外部窗口小部件添加到我的Vue网站，到目前为止，我尝试的所有操作都失败了。 Vue始终看不到外部脚本中提供的Calendar函数-我在头以及包括通过 jQuery 要求它的组件中都包含了该日历函数，但是它始终无法识别它。我不断收到错误消息：

“未定义日历”。

这是为小部件提供的代码，应该将其简单地放入html中，但是如果我仅粘贴该vue将无法编译构建。

<script type='text/javascript' src='https://panel.bed-booking.com/widget/main.js?ver=20180662'></script>
<div id='bb-calendar-556917'>
    <center><img style='width:50px !important; height:50px !important;' src='https://panel.bed-booking.com/widget/gfx/loader.gif' alt='' /><br/>
    <a href='http://bed-booking.com' style='color:#73b819 !important' rel='nofollow'>BedBooking</a></center>
    </div>
    <script type='text/javascript'>jQuery(document).ready(function() { new Calendar('3679d54db15034fe3fa49c4bad50adba', '556917', 'bb-calendar-556917', { normal: '7dbb2c',  reserved: 'fb1643', nextMonth: 'ecf5e1', font:'81817f', width: 450, lang: 'pl', showBBLink: 'none' });
     }); 
     </script>

所以我只在模板中保留了实际的html，并尝试以这种方式加载脚本

    function loadJs(url, callback) {
    jQuery.ajax({
      url: url,
      dataType: 'script',
      success: callback,
      async: true
    });
}
loadJs('https://panel.bed-booking.com/widget/jquery-1.10.2.min.js', function() {
    loadJs('https://panel.bed-booking.com/widget/main.js?ver=20180662', function() {
    jQuery(document).ready(function() { new Calendar('3679d54db15034fe3fa49c4bad50adba', '556917', 'bb-calendar-556917', 
{ normal: '7dbb2c',  reserved: 'fb1643', nextMonth: 'ecf5e1', font:'81817f', width: 450, lang: 'pl', showBBLink: 'none'});
  });
  });

为了安全起见，两个文件也都链接在head index.html

中

还有另一种方法来包含小部件吗？还是我只是错过了什么？已经花了太多时间，所以我很感激对此事的任何帮助。

需要在Vue代码中包含JQuery外部wigdet

0 个答案: