Laravel javascript需要完美的滚动条

Question

我试图要求jquery perfect-scrollbar到我的laravel。所以我跑了

npm install perfect-scrollbar

在我的Javascript文件的第1行(位于ressources/assets/javascript/material-dashboard/myfile.js下)，我需要这个插件。

require('perfect-scrollbar');

myscript.js是app.js和require('./material-dashboard/myscript.js')的必要条件。

现在浏览器控制台告诉我

Uncaught TypeError: $(...).perfectScrollbar is not a function

这些资产是用

npm run dev

myscript.js含量

require('perfect-scrollbar');

(function() {
  isWindows = navigator.platform.indexOf('Win') > -1 ? true : false;

  if (isWindows) {
    // if we are on windows OS we activate the perfectScrollbar function
    $('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar();

    $('html').addClass('perfect-scrollbar-on');
  } else {
    $('html').addClass('perfect-scrollbar-off');
  }
})();

怎么啦？

谢谢你的帮忙!

Answer 1

根据文档，要用插件初始化元素，您应该执行如下操作：

import PerfectScrollbar from 'perfect-scrollbar';

new PerfectScrollbar(".sidebar .sidebar-wrapper");
new PerfectScrollbar(".main-panel");

如果您想使用require而不是导入，您将执行如下操作：

let PerfectScrollbar = require('perfect-scrollbar').default;

最后，看起来这个插件并不是用来开箱即用jQuery的，但是，如果您想像在您的帖子中一样使用jQuery，您可以这样做：

import PerfectScrollbar from 'perfect-scrollbar';

$.fn.perfectScrollbar = function (options) {

    return this.each((k, elm) => new PerfectScrollbar(elm, options || {}));
};

$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar();

Answer 2

为了简化您的工作，在处理需求的bootstrap.js文件下(‘完美-滚动条’)；只需将其更改为window.PerfectScrollbar =require(‘完美-滚动条’).default；然后就可以了。只有在用bootstrap.js用laravel编译资产时才能回答问题