html5加vue弹窗,vue 封装全局弹窗 js-dom

最新推荐文章于 2024-04-02 16:44:29 发布

weixin_39951929

最新推荐文章于 2024-04-02 16:44:29 发布

阅读量233

点赞数

文章标签： html5加vue弹窗

/**

* Created by yx on 2017/12/21.*/exportdefault{/**

* 带按钮的弹框

* */showAlert:function(content,callback,singleButton){if(typeof(content)=="string"){if(callback){if(singleButton){//alert("内容加function两个按钮");

showDouble(content,callback);

}else{//alert("内容加function一个按钮");

showSingle(content,callback);

}return;

}

showSingle(content);

}

},//弹窗提示自定义弹框

eduToast:function(msg, duration){

duration= isNaN(duration) ? 3000: duration;var m = document.createElement('div');

m.innerHTML=msg;

m.style.cssText= "width: 60%;min-width: 150px;opacity: 0.7;height: 30px;color: rgb(255, 255, 255);line-height: 30px;text-align: center;border-radius: 5px;position: fixed;top: 40%;left: 20%;z-index: 999999;background: rgb(0, 0, 0);font-size: 12px;";

document.body.appendChild(m);

setTimeout(function() {var d = 0.5;

m.style.webkitTransition= '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';

m.style.opacity= '0';

setTimeout(function() {

document.body.removeChild(m)

}, d* 1000);

}, duration);

};varcontainHtml;/**

functionshowDouble(content,callback){if(containHtml)return;

containHtml= '

取消确定

';var cover = document.createElement('div');

document.body.appendChild(cover);

cover.outerHTML=containHtml;

document.getElementById("cover").style.cssText = 'background: rgba(0,0,0,0.5);position: fixed; top: 0; left: 0; width: 100%;height: 100%;';

document.getElementById("tipView").style.cssText = 'position:fixed;padding-bottom: 15px;left:30px;right:30px;border-radius:8px; box-shadow:0 0 10px 5px rgba(0, 0, 0, .1), 0 0 10px 5px rgba(0, 0, 0, .1), 0 0 10px 5px rgba(0, 0, 0, .1);bottom:50%;margin-bottom:-30px;text-align:center;z-index: 1000';

document.getElementById("tv_title").style.cssText = 'color:#fff;border-top-left-radius:8px;border-top-right-radius:8px;height: 2.5em;line-height:2.6em;text-align: center;font-size: 16px';

document.getElementById("tv_content").style.cssText = 'font-size:15px; display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;margin:25px 15px 25px 15px;line-height:27px';

document.getElementById("tv_cancleBtn").style.cssText = 'color:#fff;width:80px;line-height:35px;font-size:14px;border-radius:6px;margin-right:30px;border:0';

document.getElementById("tv_sureBtn").style.cssText = 'color:#fff;width:100px;line-height:35px;font-size:14px;border-radius:6px;border:0';

showTips("提示",content,callback);

document.getElementById('cover').addEventListener('click',removeFromSuperDiv);

document.getElementById('tipView').addEventListener('click',function(event) {

event.stopPropagation();

},false);

}/**

functionshowSingle(content,callback){if(containHtml)return;

containHtml= '

确定

';var cover = document.createElement('div');

document.body.appendChild(cover);

cover.outerHTML=containHtml;

document.getElementById("cover").style.cssText = 'background: rgba(0,0,0,0.5);position: fixed; top: 0; left: 0; width: 100%;height: 100%;';

document.getElementById("tv_title").style.cssText = 'color:#fff;border-top-left-radius:8px;border-top-right-radius:8px;height: 2.5em;line-height:2.6em;text-align: center;font-size: 16px';

document.getElementById("tv_sureBtn").style.cssText = 'color:#fff;width:100px;line-height:35px;font-size:14px;border-radius:6px;margin:0 auto;border:0';

showTips("提示",content,callback?callback:null);

document.getElementById('cover').addEventListener('click',removeFromSuperDiv);

document.getElementById('tipView').addEventListener('click',function(event) {

event.stopPropagation();

},false);

}/**

functionshowTips(title,content,callback) {if(!content||content=="")return;

document.getElementById("tv_title").innerHTML=title;

document.getElementById("tv_content").innerHTML=content;

document.getElementById('tv_sureBtn').addEventListener('click',function() {if(callback){callback();}

removeFromSuperDiv();

},false);