本文介绍了如何在Vue中封装一个全局的弹框组件。包括带按钮的弹框功能，可以自定义回调函数，以及一个简单的弹窗提示功能。通过创建一个全局可复用的js模块，提供`showAlert`和`eduToast`方法，实现了不同类型的弹窗提示，提升应用的用户体验。
/**
* 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 = '
扫一扫
551
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
