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

Question

我不想将 nouslider 导入 laravel7 ：

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

1. npm install nouislider

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

   window.nouislider = require('nouislider');

3. 我运行命令：

   npm run dev

4. 在 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 未定义

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

Answer 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")