uni-app 弹框组件

待我称王封你为后i 2023-02-26 09:30 8阅读 0赞

、、 此方法只适用于 app端

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NyaXNfYXJl_size_16_color_FFFFFF_t_70][]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NyaXNfYXJl_size_16_color_FFFFFF_t_70]: /images/20230209/56f5d3b8ffd14238b0ab283cdc3c690a.png