bootstrap v4 toast轻提示正确用法

用vue和小程序开发的同学会感到里面的toast轻提示很好，可惜bootstrap到4以上才支持，而它的帮助里写的代码感觉都是“扯淡”的，根本用不起来效果。

轻提示首先是不影响页面布局，像弹窗一样，设置延迟的时间后会自动消失。

下图是vue的。——新建成功那个就是轻提示了。

所以这里有标准的用法。

https://github.com/Script47/Toast

https://www.kaiu.net/script/content/3154

https://www.kaiu.net/script/show/3154

注意，git上代码在不断更新，并且example也是在更新，请以上面第一为准哦。

首先要引用git上toast.css和js，以及bootstrap.js和css的4.0版本以上，然后将example代码拷贝过来使用即可。

代码语言：javascript复制

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <script src="../dist/toast.min.js"></script>
  <script>
  const TYPES = ['info', 'warning', 'success', 'error'],
    TITLES = {
      'info': 'Notice!',
      'success': 'Awesome!',
      'warning': 'Watch Out!',
      'error': 'Doh!'
    },
    CONTENT = {
      'info': 'Hello, world! This is a toast message.',
      'success': 'The action has been completed.',
      'warning': 'It's all about to go wrong',
      'error': 'It all went wrong.'
    },
    POSITION = ['top-right', 'top-left', 'top-center', 'bottom-right', 'bottom-left', 'bottom-center'];

  $.toastDefaults.position = 'bottom-center';
  $.toastDefaults.dismissible = true;
  $.toastDefaults.stackable = true;
  $.toastDefaults.pauseDelayOnHover = true;

  $('.snack').click(function() {
    var type = TYPES[Math.floor(Math.random() * TYPES.length)],
      content = CONTENT[type];

    $.snack(type, content);
  });

  $('.toast-btn').click(function() {
    var rng = Math.floor(Math.random() * 2)   1,
      type = TYPES[Math.floor(Math.random() * TYPES.length)],
      title = TITLES[type],
      content = CONTENT[type];

    if (rng === 1) {
      $.toast({
        type: type,
        title: title,
        subtitle: '11 mins ago',
        content: content,
        delay: 5000
      });
    } else {
      $.toast({
        type: type,
        title: title,
        subtitle: '11 mins ago',
        content: content,
        delay: 5000,
        img: {
          src: 'https://via.placeholder.com/20',
          alt: 'Image'
        }
      });
    }
  });

https 网络安全 bootstrap git vue.js

0 人点赞