在 laravel 7 中安装 npm 后如何使用 nouislider

Posted 2023-03-14

【中文标题】在 laravel 7 中安装 npm 后如何使用 nouislider

【英文标题】：how to use nouislider after npm install in laravel7

【发布时间】：2020-11-25 10:26:51

【问题描述】：

我不想将 nouslider 导入 laravel7 ：

所以到目前为止我做了什么：

npm install nouislider

在 resources/js/bootstrap.js 我添加了：

window.nouislider = require('nouislider');

我运行命令：

npm run dev

在 public/js/script 我添加了：

var slider = document.getElementById('slider');

noUiSlider.create(slider, 
    start: [20, 80],
    connect: true,
    range: 
        'min': 0,
        'max': 100
    
);

5.在我看来，我有：

 <div class="col-md-12">
    <div id="slider"></div>
 </div>

我收到了这个错误：

未捕获的 ReferenceError: noUiSlider 未定义

我不知道在那之后我要做什么？

【参考方案1】：

这可能是由两个错误引起的：

错误 1

window.nouislider = require('nouislider');

然后要使用它，您可以使用 nouislider.create(... 而不是 noUiSlider.create(...

错误 2

defer 属性也可能导致这种情况（它默认包含在 Laravel 身份验证中）：

<script src=" asset('js/app.js') " defer></script>

您可以删除该属性或在页面加载后使用window.onload()执行您的代码

注意

另请注意，您需要在您的app.scss add 中添加nouislider 样式表：

@import url("https://cdn.jsdelivr.net/npm/nouislider@14.6.0/distribute/nouislider.min.css")

【讨论】：

别忘了运行npm run dev之后

感谢您的帮助，它在 chrome 上运行良好，但在 firefox 上运行良好，我认为 nouislider 库中存在兼容性错误

我在 Firefox 上测试过，效果很好。他们还在他们的网站上声明支持 Firefox。您收到任何错误吗？

我的错，它工作正常。我认为这是一个缓存问题；非常感谢！！

很高兴为您提供帮助，欢迎来到 Stack Overflow。如果此答案或任何其他答案解决了您的问题，请将其标记为已接受。