3

我尝试要求 jquery pulginperfect-scrollbar到我的 laravel javascript。所以我跑了

npm install perfect-scrollbar

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

require('perfect-scrollbar');

myscript.js必需的app.jsrequire('./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');
  }
})();

怎么了?

谢谢你的帮助!

4

2 回答 2

7

只是为了简化您的工作,在处理require('perfect-scrollbar'); 的bootstrap.js 文件下 只需将其更改为 window.PerfectScrollbar = require('perfect-scrollbar').default; 你会很高兴的。只有在 laravel 中使用 bootstrap.js 编译资产时才回答问题

于 2018-08-24T18:12:01.453 回答
2

根据文档,要使用插件初始化元素,您应该执行以下操作:

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();
于 2018-07-21T15:24:23.977 回答