时间戳

首页 > 解决方案 > 在 laravel7 中安装 npm 后如何使用 nouislider

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

问题描述

我不想将 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 未定义

我不知道那之后我该怎么办？

标签： javascriptlaravelnpmnouislider

解决方案

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

错误 1

window.nouislider = require('nouislider');

然后使用它你做nouislider.create(...而不是noUiSlider.create(...

错误 2

该defer属性也可能导致这种情况（它默认包含在 Laravel auth 中）：

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

页面加载后，您可以删除属性或执行代码window.onload()

笔记

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

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

推荐阅读