1. 程式人生 > >vue中封裝一個全域性的彈窗js

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); * */

將其在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)
}