uniapp弹出框_uni-app 弹框组件

最新推荐文章于 2025-09-29 10:23:50 发布

原创最新推荐文章于 2025-09-29 10:23:50 发布 · 5.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uniapp弹出框

本文介绍了如何在uni-app中自定义弹框组件，包括创建、显示和隐藏弹框的方法，以及在main.js中注册和项目中使用的方式。通过示例展示了在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()