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 ><div > <div ></div> <div ></div><div> <button >取消</button><button >确定</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 ><div > <div ></div> <div ></div> <div >确定</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);
*
*/将其在vue目录中用一个js文件存起来，哪个页面需要弹窗时引入
import eduAlert from '@/js/alert.js'
在方法中就可以使用了
alertmethos(){
// eduAlert.showAlert("我很好的的哈哈",null,true);
// eduAlert.showAlert("我很好的的哈哈",function(){
// alert(1111);
// },true);
// eduAlert.showAlert("我很好的的哈哈",function(){
// alert(1111);
// },false);
// alert(1111)
eduAlert.eduToast("自定义弹窗时长弹窗",2000)
}