vue中封装一个全局的弹窗js

/*** Created by yx on 2017/12/21.*/export default {/*** 带按钮的弹框* <!--自定义提示标题,内容,单个按钮事件-->*/ ???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); ???},};var containHtml;/**<!--自定义内容,两个个按钮事件-->*/function showDouble(content,callback){ ???if(containHtml)return; ???containHtml = ‘<div id="cover"><div id="tipView"> <div id="tv_title"></div> <div id="tv_content"></div><div> <button id="tv_cancleBtn">取消</button><button id="tv_sureBtn">确定</button></div> </div></div>‘; ???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);}/**<!--只显示提示内容-->*/function showSingle(content,callback){ ???if(containHtml)return; ???containHtml = ‘<div id="cover"><div id="tipView"> <div id="tv_title"></div> <div id="tv_content"></div> <div id="tv_sureBtn">确定</div> </div></div>‘; ???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_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);}/**<!--显示提示-->*/function showTips(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); ???document.getElementById(‘tv_cancleBtn‘).addEventListener(‘click‘,function () { ???????removeFromSuperDiv(); ???},false);}/**<!--移除弹框-->*/function removeFromSuperDiv(){ ???var cover = document.getElementById(‘cover‘); ???if (cover != null){ ???????cover.parentNode.removeChild(cover); ???} ???containHtml=null;}/***<!--调用方法--><!--两个按钮-->$().showAlert("我很好的的哈哈",function(){alert("回来了");},true);<!--一个按钮-->$().showAlert("我很好的的哈哈哈",function(){alert("回来了");},false);**/