请问bootstrap5里的toast插件怎么调用

Question

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})

这是官方文档给的初始化代码，但是实在没有理解，请大佬能举一个具体的实例。ver5的初始化和ver4的差别有点大了。

Answer 1

// 将querySelectorAll得到的nodeList对象转化成一个数组
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
// 对数组遍历，并返回一个新的数组
var toastList = toastElList.map(function (toastEl) {
  // 返回一个Toast实例化对象
  return new bootstrap.Toast(toastEl, option)
})

// toastElList是页面内所有的toastDOM对象
// toastList是实例化后的toast对象数组
// toastEl是单个DOM对象
// option 是toast的配置项

配置项参考如下：

 

animation: 是否开启CSS动画效果

autohide: 是否开启自动隐藏

delay: 延迟隐藏时间 

 

页面内只有一个Toast的初始化方法

const options = {
  animation: true, // 开启过渡动画
  autohide: true, // 开启自动隐藏
  delay: 3000 // 3000ms后自动隐藏
}
const toastEl = document.getElementById('toast')
const toast = new bootstarp.Toast(toastEl, options)