uni-app 弹框组件

、、 此方法只适用于 app端

g_show_model  .js -------------------------------------

import sj_show_modal from './index.js'
const g_show_modal = {
    install: function(Vue) {
      Vue.prototype.$showModal=function(op={}){
         return    new Promise((resolve, reject)=>{
                new sj_show_modal({
                    ...op,
                    $event:function(e){
                        if(e.res){
                            resolve(e);
                        }else{
                            reject(e);
                        }
                     }
                    }).show();
            })
        }
    }
};

export default g_show_modal
 

index  .js -------------------------------------

/**
 * author:G brother
 * date:20200430
 * Thank:chunLei所提供的思路和参照
 * **/
export class show_model{
    constructor(option={}) {
    
        this.bodyModel=null;
        this.cancelModel=null;
        this.confirmModel=null;
        this.pageHeight=uni.getSystemInfoSync().screenHeight;
        let opacity = option.opacity || 0.4;
        let zIndex = option.zIndex || 99;
        let model_tit=option.title||'温馨提示';
        let model_concent=option.concent||"请输入内容~"
        let clickEvent=option.IsclickEvent||false;
        let cancelVal=option.cancelVal||'取消';
        let confirmVal=option.confirmVal||'确认';
        let cancelColor=option.cancelColor||'#0F7EF5';
        let confirmColor=option.confirmColor||'#0F7EF5';
        let delCancel=option.delCancel||false;
        let align=option.align||"center"
        let fn = ()=>{}
        this.$event = option.$event || fn
        
        //#ifdef APP-PLUS
        this.creatView({height:`${this.pageHeight}px`,top:0},opacity,clickEvent,{'tit':model_tit,'concent':model_concent,cancelVal,confirmVal,confirmColor,cancelColor,delCancel,align})
        //#endif
    }

    //生成提示框view
    creatView(style,opa,clickEvent,modelInfo){
        style = {
            left:'0px',
            width:'100%',
            ...style
        }

        let view = new plus.nativeObj.View('showModalView',style);
        view.draw([
            {tag:'rect',id:'modal',color:`rgba(0,0,0,${opa})`,position:{top:'0px',left:'0px',width:'100%',height:'100%'}},
            {tag:'rect',id:'concent',color:`rgb(255,255,255)`,rectStyles:{borderWidth:'2px',radius:'8px'},position:{top:'280px',left:'10%',width:'80%',height:'160px'}},
            {tag:'font',id:'title',text:modelInfo.tit,textStyles:{size:'16px',color:'#000'},position:{top:'290px',left:'20%',width:'60%',height:'30px'}},
            {tag:'font',id:'text',text:modelInfo.concent,textStyles:{size:'14px',color:'#666',whiteSpace:'normal',align:modelInfo.align},position:{top:'320px',left:'23%',width:'54%',height:'60px'}},
            {tag:'rect',id:'line',color:'#EAEAEC',position:{top:'390px',left:'10%',width:'80%',height:'1px'}},
            {tag:'rect',id:'line2',color:'#EAEAEC',position:{top:'390px',left:'49%',width:modelInfo.delCancel?'0px':'1px',height:modelInfo.delCancel?'0px':'50px'}}
            
        ]);

        if(!modelInfo.delCancel){
            // 取消    
            let viewCancel=new plus.nativeObj.View('cancel',{width:'20%',height:'5%',top:'396px',left:'20%',backgroundColor:'rgba(255,255,255,0)'});
                viewCancel.draw([
                  {tag:'font',id:'cancel',text:modelInfo.cancelVal,textStyles:{color:modelInfo.cancelColor,size:'16px'}},
                ]);
                
                viewCancel.addEventListener("click",(e)=>{
                    this.$event({res:false,types:'cancel'});
                    this.hide()
                },false);
                this.cancelModel=viewCancel;
        }
        
        // 确认
        let viewconfirm=new plus.nativeObj.View('confirm',{width:modelInfo.delCancel?'60%':'40%',height:'5%',top:'396px',left:modelInfo.delCancel?'20%':'50%',backgroundColor:'rgba(255,255,255,0)'});
            viewconfirm.draw([
              {tag:'font',id:'confirm',text:modelInfo.confirmVal,textStyles:{color:modelInfo.confirmColor,size:'16px'}},
            ]);
        
            viewconfirm.addEventListener("click",(e)=>{
                this.$event({res:true,types:'confirm'});
                this.hide();
            },false);    
          //点击蒙布
          if(clickEvent){
            
             view.addEventListener("click", (e) => {
                this.$event({res:false,types:'cover'});
                this.hide()
            }, false);
        }
       this.bodyModel=view;
       this.confirmModel=viewconfirm;
    }
    showModalAnimationClose(){
        var options = {type:'pop-out',duration:300};
            plus.nativeObj.View.startAnimation(options,{bitmap:this.bodyModel},{bitmap:this.cancelModel},{bitmap:this.viewconfirm},function(){
                console.log('plus.nativeObj.View.startAnimation动画结束');
                // 关闭原生动画
                plus.nativeObj.View.clearAnimation();
            });
    }
    showModalAnimationOpen(){
        var options = {type:'pop-in',duration:300};
            plus.nativeObj.View.startAnimation(options,{bitmap:this.bodyModel},{bitmap:this.cancelModel},{bitmap:this.viewconfirm},function(){
                console.log('plus.nativeObj.View.startAnimation动画结束');
                // 关闭原生动画
                plus.nativeObj.View.clearAnimation();
            });
    }
    show(){
        this.showModalAnimationOpen();
        this.bodyModel.show();
        if(this.cancelModel){
            this.cancelModel.show();
        }
        this.confirmModel.show();
    
    }
    hide(){
        this.showModalAnimationClose();
        this.bodyModel.hide();
        if(this.cancelModel){
          this.cancelModel.hide();    
        }
        this.confirmModel.hide();
        
        
    }
}

export default show_model

 

在 main.js 注册

import G_show_modal from '@/components/G_show_modal/g_show_modal.js'
Vue.use(G_show_modal)

 

 

项目中 使用

// #ifdef  APP-PLUS
                    this.$showModal({
                        title: '提示',
                        concent: '你还未登录',
                        delCancel: true,
                        confirmVal: '确定',
                        align: 'center'
                    }).then(res => {
                        uni.navigateTo({
                            url: '/pages/my-page/login'
                        });
                    });
                    // #endif

本文地址：https://blog.csdn.net/Cris_are/article/details/107353895