vue移动端模态框(可传参)的实现

2023-08-08 13:20:04 66

1-封装模态框组件Mydialog(样式可以自己写)






.modal-enter-active{
animation:modal-in0.35slinear;
}

.modal-leave-active{
animation:modal-in0.35sreverselinear;
}

@keyframesmodal-in{
0%{
transform:translateY(-20px)rotateX(-35deg);
opacity:0;
}
50%{
opacity:0.5;
}
100%{
transform:translateY(0)rotateX(0);
opacity:1;
}
}

.modal{
width:100%;
height:100%;
position:fixed;
left:0;
top:0;
right:0;
bottom:0;
z-index:1001;
outline:0;
overflow:hidden;
background-color:rgba(0,0,0,0.8);
}

.modal-dialog{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:auto;
width:608px;
background:#fff;
border-radius:20px;
box-shadow:08px24px7pxrgba(0,0,0,0.11);
z-index:1002;
overflow:hidden;

.modal-content{
>div{
//padding:0.15rem0.4rem;
}
.modal-header{
background:url("../assets/images/tournaments/1.png")no-repeat;
background-size:cover;
height:70px;
img{
width:100%;
}
}
.modal-body{
//padding:90px072px0;
color:#3c3c43;
font-size:25px;
border-bottom:1pxsolid#bdbdbd;
font-weight:500;
}
.footer{
a{
font-size:30px;
color:#2c2c2c;
}
}
.modal-footer{
padding:30px040px0;
color:#3c3c43;
font-size:30px;
font-weight:500;
}
}
}

.modal-backup{
width:100%;
height:100%;
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:1000;
background:rgba(0,0,0,0.5);
}

2-使用方法1

页面中引入在进行调用

(1)importMydialogfrom'../carrer/mydialog.vue';

(2)引入组件

components:{
Mydialog
}

(3 在html中插入组件

data中的参数

showDialog:false,
dialogOption:{
text:'欢迎',
cancelButtonText:'否',
confirmButtonText:'是',
isShowCancelButton:''
},

methods中在需要出现弹框时候让其显示就好啦

showDialog()
this.dialogOption.text=`确认拒绝？`;
this.dialogOption.isShowCancelButton=true
this.showDialog=true;
this.$refs.mydialog.confirm().then(()=>{
this.showDialog=false;
this.refuse(id)
}).catch(()=>{
this.showDialog=false;
})
},

3.使用方法2

因为在项目中经常要使用到，而且每次使用的时候都要带上相同的参数，所以就封装了一个js，（模态框的工具类），使用的时候调用就好了

1)-新建一个js文件dialogUtil，复制下面的代码就好了

classnormalDialog{
constructor(args){
//console.log("args",args);
this.parent=args.parent;
this.isShowDialog=args.isShowDialog;
this.dialogOption=this.parent[args.dialogOption];
this.mydialog=this.parent.$refs[args.mydialog];
//console.log("dialogOption=",this.dialogOption);
}

showDialog(text,showCancelButton,success,error){
console.log("showDialog=="+text);
this.dialogOption.text=text||"请输入弹框标题";
letsuc=typeofshowCancelButton=="function"?showCancelButton:success;
leterr=typeofshowCancelButton=="function"?success:error;
if(typeofshowCancelButton!="function"){
this.dialogOption.isShowCancelButton=!!showCancelButton;
}else{
this.dialogOption.isShowCancelButton=true;
}
this.parent[this.isShowDialog]=true;
this.confirm(suc,err);
}

//弹框回调
confirm(success,error){
letself=this;
this.mydialog.confirm().then(()=>{
typeofsuccess=="function"&&success();
self.parent[this.isShowDialog]=false;
}).catch(()=>{
typeoferror=="function"&&error();
self.parent[this.isShowDialog]=false;
})
}

toString(){
//console.log(this.name+":"+this.age);
}

}

exportdefault{
//args：参数，类型
creatByType(args,type){
type=!!type?type:1;

switch(type){
case1:
returnnewnormalDialog(args)
break;
case2:
break
default:
break;
}
}
}

2)因为很多页面都用到，所以让他成为全局的（在main中引入就好了），那么别的页面使用就不需要引入了

importdbDiaLogUtilfrom'./assets/js/dialogUtil'
Vue.prototype.$dbDiaLogUtil=dbDiaLogUtil;

3)在使用的时候

页面中引入组件在进行调用

(1)importMydialogfrom'../carrer/mydialog.vue';

(2)引入组件

components:{
Mydialog
}

（3）在html中插入组件

在data（）中用对象的形式

isShowDialog:false,
dialogOption:{text:'',cancelButtonText:'否',confirmButtonText:'确认',isShowCancelButton:false},
dialogNormal:null,

在mounted中进行初始化

this.dialogNormal=this.$dbDiaLogUtil.creatByType({parent:this,isShowDialog:'isShowDialog',dialogOption:'dialogOption',mydialog:'mydialog'});

最后在需要弹框的地方调用，一句代码搞定啦

this.dialogNormal.showDialog('dialog要显示的内容',function(){console.log('成功执行的')},function(){console.log('失败执行的')})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue移动端模态框(可传参)的实现

热门推荐

随机推荐