超级哈密瓜 2021-06-05 20:48 采纳率: 100%
浏览 312
已采纳

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

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

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

  • 写回答

3条回答 默认 最新

  • CSDN专家-林老师 2021-06-05 20:53
    关注
    // 将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)
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥20 java在应用程序里获取不到扬声器设备
  • ¥15 echarts动画效果的问题,请帮我添加一个动画。不要机器人回答。
  • ¥60 许可证msc licensing软件报错显示已有相同版本软件,但是下一步显示无法读取日志目录。
  • ¥15 Attention is all you need 的代码运行
  • ¥15 一个服务器已经有一个系统了如果用usb再装一个系统,原来的系统会被覆盖掉吗
  • ¥15 使用esm_msa1_t12_100M_UR50S蛋白质语言模型进行零样本预测时,终端显示出了sequence handled的进度条,但是并不出结果就自动终止回到命令提示行了是怎么回事:
  • ¥15 前置放大电路与功率放大电路相连放大倍数出现问题
  • ¥80 部署运行web自动化项目
  • ¥15 腾讯云如何建立同一个项目中物模型之间的联系
  • ¥30 VMware 云桌面水印如何添加