在 laravel7 中安装 npm 后如何使用 nouislider

Question

我不想将 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.and 在我看来我有 :

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

我遇到了这个错误：

Uncaught ReferenceError: noUiSlider is not defined

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

Answer 1

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

错误 1

window.nouislider = require('nouislider');

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

错误 2

defer 属性也可能导致此问题（它默认包含在 Laravel auth 中）：

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

您可以使用 window.onload()

删除属性或在页面加载后执行您的代码

备注

另请注意，您需要在 app.scss 添加 nouislider 样式 sheet 添加：

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

在 laravel7 中安装 npm 后如何使用 nouislider

how to use nouislider after npm install in laravel7

javascript

laravel

npm

nouislider

我不想将 nouslider 导入 laravel7 :

到目前为止我做了什么：