Laravel javascript 需要完美滚动条

Question

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

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

根据 docs，要使用插件初始化元素，您应该执行以下操作：

import PerfectScrollbar from 'perfect-scrollbar';

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

如果你想使用 require 而不是 import 你会做这样的事情：

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

最后，该插件看起来并不适合开箱即用的 jQuery，但是，如果您想像在 [=] 中一样使用 jQuery 23=] 您可以执行以下操作：

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 文件下处理 要求('perfect-scrollbar'); 只需将其更改为 window.PerfectScrollbar = require('perfect-scrollbar').default; 就可以了。仅在 laravel 和 bootstrap.js

中使用编译资产时回答问题

Laravel javascript 需要完美滚动条

Laravel javascript require perfect-scrollbar

javascript

laravel

perfect-scrollbar

laravel-mix