繁体   English   中英

如何在 Rails 6 中使用 webpacker 安装 bs-stepper?

[英]how to install bs-stepper with webpacker in rails 6?

我已经使用yarn add bs-stepper安装了它

我已经将库加载到我的environment.js

const { environment } = require("@rails/webpacker");

const webpack = require("webpack");

environment.plugins.append(
  "Provide",
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    Popper: ["popper.js", "default"],
    Stepper: "bs-stepper",
  })
);

module.exports = environment;

我已经在我的pack/application.js上创建了一个实例

import Rails from "@rails/ujs";
import Turbolinks from "turbolinks";
import * as ActiveStorage from "@rails/activestorage";
import "channels";
import "bootstrap";
import "../stylesheets/application";
require("admin-lte");
import "@fortawesome/fontawesome-free/js/all";

document.addEventListener("turbolinks:load", () => {
  $('[data-toggle="tooltip"]').tooltip();
  var stepper = new Stepper($(".bs-stepper")[0]);
});

Rails.start();
Turbolinks.start();
ActiveStorage.start();

require("trix");
require("@rails/actiontext");
import "controllers";

但是当我点击这个按钮时代码不起作用

<button class="btn btn-primary" onclick="stepper.next()">Next</button>

我收到这个错误

(index):223 Uncaught ReferenceError: stepper is not defined
    at HTMLButtonElement.onclick ((index):223)

我认为这是因为我的 html 找不到在application.js中声明的stepper

问题是我设置Stepper实例的方式

我需要像这样将它显式附加到window的变量

document.addEventListener("turbolinks:load", () => {
  $('[data-toggle="tooltip"]').tooltip();
  window.stepper = new Stepper($(".bs-stepper")[0]);
});

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM