前序介绍
我们经常在开发过程中需要一个提示信息，总不能给用户弹个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.仓库地址
这个demo呢是动态创建<div id='showToastWraper'></div>
在仓库里面我还有一个demo格式，只不过是在页面写的一个公共的<div id='showToastWraper'></div>不是手动创建的，而且也没有对宽度、边框角度进行处理，如果你项目的showToast是一个固定你也可以把自己的变量写死，那么灵活性上就大大的打些折扣。
网友评论