jquery的showToast方法

前序介绍

我们经常在开发过程中需要一个提示信息，总不能给用户弹个alert吧，网上有大量的不错的第三方库：
如果你是jquery项目的话： jquery-toast-plugin
如果你是react项目的话：react-toastify
如果你是Vue项目的话：vue-toasted

还有react的antd的message组件
还有vue的element的message组件
......

上面的库封装的都不错，也很完善，唯一不足就是你需要下载他们，引入他们才能使用，如果是一个简单的我觉得没有必要引入体积这么庞大的第三方的库，还不如自己花时间写一个简单的方法，满足自己项目的需求即可：体积小，便于调用。

1.代码演示

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>ShowToast</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
  <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
  <style>
    #showToastWraper {
      position: fixed;
      z-index: 999;
      top: 35%;
      right: 0;
      left: 0;
      width: 90%;
      margin: auto;
      background: rgba(0, 0, 0, 0.6);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000, endColorstr=#7f000000);
      text-align: center;
      padding: 10px 20px;
      color: #dcdcdc;
      border-radius: 50px;
    }
  </style>
</head>

<body>
  <button id="show" class="btn btn-primary">showToast</button>

  <script>

    function showToast(text, width, radius) {
      var widthDiv = width ? width : '90%';//自定义宽度
      var radiusDiv = radius ? radius : '50px';//自定义边框角度
      //此处你还可以定义 位置、文字颜色大小、背景色、显示时长等等

      var showToastDiv = "<div id='showToastWraper'></div>";
      var showToastWraper = $("#showToastWraper");
      var isExat = showToastWraper.length;

      if (!isExat) {
        //第一次创建元素 并且设置元素把显示状态的停止掉、渐隐显示、显示文本内容、设置自定义样式、1.5s后渐隐消失
        $(document.body).append(showToastDiv);
        $("#showToastWraper").stop().fadeIn(300).html(text).css({ width: widthDiv, borderRadius: radiusDiv }).delay(1500).fadeOut(500);
      } else {
        //第二次 就不需要创建元素了减少dom操作
        showToastWraper.stop().fadeIn(300).html(text).css({ width: widthDiv, borderRadius: radiusDiv }).delay(1500).fadeOut(500);
      }
    }

    $("#show").on("click", function () {
      showToast('显示文本内容显显示文本内容显'); //默认显示的样式
      // showToast('显示文本内容显显示文本内容显', '90%', '50px'); //可以更改宽度、边框角度等等
    })
  </script>
</body>

</html>

所以自己抽时间写了一个简单的showToast，演示效果

效果

2.注意事项

1）需要借助jquery
2）bootstrap 可以不用的我只是为了想演示按钮好看一些罢了

3.仓库地址

query-showToast

这个demo呢是动态创建<div id='showToastWraper'></div>
在仓库里面我还有一个demo格式，只不过是在页面写的一个公共的<div id='showToastWraper'></div>不是手动创建的，而且也没有对宽度、边框角度进行处理，如果你项目的showToast是一个固定你也可以把自己的变量写死，那么灵活性上就大大的打些折扣。

最后编辑于：2019.04.27 18:16:19