Bootstrap5とモジュール付きのバニラJSだけを使用してWebサイトを作成しようとしていますが、BootstrapToastの使用に問題があります。インスタンスは正常に作成されましたが、関数を呼び出して表示しても何も起こりません。
このブートストラップ要素を返すモジュールをインポートしました。 import toast from "../../components/toast/toast.js";
呼び出すtoast()と、次のHTML要素が返されます。
<div aria-atomic="true" aria-live="assertive"
class="toast" role="alert">
<div class="toast-header">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button aria-label="Close" class="btn-close"
data-bs-dismiss="toast" type="button">
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
モジュールとしてブートストラップを使用しています： import { Toast } from '../../plugins/bootstrap-5.0.0-beta1-dist/js/bootstrap.esm.js'
そして、このように私のトーストを作成します：
const toastEl = toast();
const myToast = new Toast(toastEl);
myToast.show();
デバッグでは、インスタンス 'myToast'が次を返すことがわかります。
Toast {_element：div.toast、_config：{…}、_ timeout：null} config：{animation：true、autohide：true、delay：5000} element：div.toast_timeout：null__proto：BaseComponent
toast（）から返されたtoastElがDOMに追加されていることを確認してください...
var toastEl = toast();
document.body.appendChild(toastEl)
const myToast = new Toast(toastEl);
myToast.show();
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加