Open Linda0821 opened 5 years ago
以下是封装的代码
/** * 用原生 JS 封装一个 Toast 组件 */ var Toast = { // 隐藏的 setTimeOut 引用 hideTimeOut: null, /** * 初始化 */ init: function () { var toastNode = document.createElement('section'); toastNode.innerHTML = '<i class="iconfont icon-success"></i><i class="iconfont icon-error"></i><span class="text">111</span>'; toastNode.id = 'toastWaka'; // 设置id,一个页面有且仅有一个Toast toastNode.setAttribute('class', 'toast'); // 设置类名 toastNode.style.display = 'none'; // 设置隐藏 document.body.appendChild(toastNode); }, /** * 显示Toast * @param text 文本内容 * @param type 类型 success error * @param duration 持续时间 */ show: function (text, type, duration) { // 确保上一次的 TimeOut 已被清空 if (this.hideTimeOut) { clearTimeout(this.hideTimeOut); this.hideTimeOut = null; // console.error('上一次的 TimeOut 还未走完!'); // return; } if (!text) { console.error('text 不能为空!'); return; } var domToastWaka = document.getElementById('toastWaka'); console.log('domToastWaka', domToastWaka); if (!domToastWaka) { console.error('toastWaka DOM 不存在!'); return; } var domIconSuccess = domToastWaka.querySelector('.icon-success'); // 成功图标 var domIconError = domToastWaka.querySelector('.icon-error'); // 错误图标 var domToastText = domToastWaka.querySelector('.text'); // 文字 domToastText.innerHTML = text || ''; switch (type) { case 'success': domIconSuccess.style.display = 'inline-block'; domIconError.style.display = 'none'; break; case 'error': domIconSuccess.style.display = 'none'; domIconError.style.display = 'inline-block'; break; default: domIconSuccess.style.display = 'none'; domIconError.style.display = 'none'; break; } domToastWaka.style.display = 'block'; // 不传的话默认2s var that = this; this.hideTimeOut = setTimeout(function () { domToastWaka.style.display = 'none'; that.hideTimeOut = null; // 置 TimeOut 引用为空 }, duration || 2000); }, /** * 隐藏 Toast */ hide: function () { // 如果 TimeOut 存在 if (this.hideTimeOut) { // 清空 TimeOut 引用 clearTimeout(this.hideTimeOut); this.hideTimeOut = null; } var domToastWaka = document.getElementById('toastWaka'); if (domToastWaka) { domToastWaka.style.display = 'none'; document.body.removeChild(domToastWaka); } } };
css样式
/*toast样式*/ #toastWaka { position: absolute; display: none; left: 50%; bottom: 50%; z-index: 99999; margin: 0 auto; -webkit-transform: translate(-50%); transform: translate(-50%); width: 120px; height:40px; line-height: 40px; border-radius: 5px; text-align: center; color: #fff; background-color: rgba(000,000,000,0.5); } #toastWaka .text{ color: #fff; display: inline-block; font-size: 14px; position: absolute; top:0; bottom:0; right:0; left:0; }
如何使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>toast</title> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/> <meta name="description" content="" /> <style> /*toast样式*/ #toastWaka { position: absolute; display: none; left: 50%; bottom: 50%; z-index: 99999; margin: 0 auto; -webkit-transform: translate(-50%); transform: translate(-50%); width: 120px; height:40px; line-height: 40px; border-radius: 5px; text-align: center; color: #fff; background-color: rgba(000,000,000,0.5); } #toastWaka .text{ color: #fff; display: inline-block; font-size: 14px; position: absolute; top:0; bottom:0; right:0; left:0; } </style> </head> <body> <section id="redbag"> <button class="downbtn" onclick="icCopy()">复制邀请码</button> </section> <!--<script src="http://browser.umeweb.com/v6/ume/js/common/jquery.js"></script>--> <script src="./toast.js"></script> <script type="text/javascript"> function icCopy() { try { // Now that we've selected the anchor text, execute the copy command var msg = '邀请码已复制' ; var type = 'success'; Toast.init(); Toast.show(msg, type, null); setTimeout(function () { Toast.hide(); }, 20000); } catch (err) { Toast.init(); Toast.show('Oops, unable to copy', 'error', null); setTimeout(function () { Toast.hide(); }, 20000); } } </script> </body> </html>
以下是封装的代码
css样式
如何使用