美文网首页
tost提示

tost提示

作者: BugMyGod | 来源:发表于2018-12-13 16:44 被阅读0次
     <style>
            *{
                padding: 0;
                margin: 0;
            }
            .yg-toast{
                position: fixed;
                background: rgba(0,0,0,.7);
                border-radius: 4px;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                max-width: 60%;
                text-align: center;
                transition: all .1s;
            }
            .yg-toast-text{
                color: #fff;
                padding: 4px 10px;
                padding-bottom: 6px;
            }
        </style>
    
    //tost提示
        (function(window , undefined ){
            var Ygtoast = function(){ //构造函数大驼峰命名法
            };
            Ygtoast.prototype={  //prototype 属性使您有能力向对象添加属性和方法。
                create: function(str,duration) {
                    let self = this;
                    var toastHtml = '';
                    var toastText = '<div class="yg-toast-text">'+str+'</div>';
                    toastHtml = '<div class="yg-toast">'+toastText+'</div>';
                    if(document.querySelector(".yg-toast"))return;    //当还没hide时禁止重复点击
                    document.body.insertAdjacentHTML('beforeend', toastHtml);
                    duration == null ? duration=2000 : '';  //如果toast没有加上时间,默认2000毫秒;
                    self.show();
                    setTimeout(function(){
                        self.hide();
                    }, duration);
                },
                show:function(){
                    let self = this;
                    document.querySelector(".yg-toast").style.display = "block";
                    document.querySelector(".yg-toast").style.marginTop =  "-"+Math.round(document.querySelector(".yg-toast").offsetHeight/2)+"px";
                    if(document.querySelector(".yg-toast"))return;
                },
                hide:function(){
                    var self = this;
                    if(document.querySelector(".yg-toast")){
                        document.querySelector(".yg-toast").parentNode.removeChild(document.querySelector(".yg-toast"));
                    }
                },
                toast:function(str,duration){
                    var self = this;
                    return self.create(str,duration);
                }
            };
            window.Ygtoast = Ygtoast;
        }(window));
        // 调用
       var yg = new Ygtoast();
       yg.toast("你说神马",1500);
    

    相关文章

      网友评论

          本文标题:tost提示

          本文链接:https://www.haomeiwen.com/subject/hcebhqtx.html