当前位置: 首页 > Web前端 > CSS

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

时间:2023-03-31 01:13:55 CSS

.modal-enter-active{动画:modal-in0.35slinear;}.modal-leave-active{animation:modal-in0.35sreverselinear;}@keyframes模态输入{0%{transform:translateY(-20px)rotateX(-35deg);不透明度:0;}50%{不透明度:0.5;}100%{转换:translateY(0)rotateX(0);不透明度:1;}}.modal{宽度:100%;高度:100%;位置:固定;左:0;顶部:0;右:0;底部:0;z-指数:1001;大纲:0;溢出:隐藏;背景色:rgba(0,0,0,0.8);}.modal-dialog{position:absolute;左:50%;顶部:50%;转换:翻译(-50%,-50%);宽度:自动;宽度:608px;背景:#fff;边界半径:20px;框阴影:08px24px7pxrgba(0,0,0,0.11);z-指数:1002;溢出:隐藏;.modal-content{>div{//填充:0.15rem0.4rem;}.modal-header{background:url("../assets/images/tournaments/1.png")不重复;背景尺寸:封面;高度:70px;img{宽度:100%;}}.modal-body{//填充:90px072px0;颜色:#3c3c43;字体大小:25px;border-bottom:1pxsolid#bdbdbd;字体粗细:500;}.footer{a{字体大小:30px;颜色:#2c2c2c;}}.modal-footer{填充:30px040像素0;颜色:#3c3c43;字体大小:30px;字体粗细:500;}}}.modal-backup{宽度:100%;高度:100%;位置:固定;顶部:0;右:0;底部:0;左:0;z-指数:1000;background:rgba(0,0,0,0.5);1-封装模态框组件Mydialog(样式可以自己写).modal-enter-active{动画:modal-in0.35slinear;}.modal-leave-active{animation:modal-in0.35sreverselinear;}@keyframes模态输入{0%{transform:translateY(-20px)rotateX(-35deg);不透明度:0;}50%{不透明度:0.5;}100%{转换:translateY(0)rotateX(0);不透明度:1;}}.modal{宽度:100%;高度:100%;位置:固定;左:0;顶部:0;右:0;底部:0;z-指数:1001;大纲:0;溢出:隐藏;背景色:rgba(0,0,0,0.8);}.modal-dialog{position:absolute;左:50%;顶部:50%;转换:翻译(-50%,-50%);宽度:自动;宽度:608px;背景:#fff;边界半径:20px;框阴影:08px24px7pxrgba(0,0,0,0.11);z-指数:1002;溢出:隐藏;.modal-content{>div{//填充:0.15rem0.4rem;}.modal-header{background:url("../assets/images/tournaments/1.png")不重复;背景尺寸:封面;高度:70px;img{宽度:100%;}}.modal-body{//填充:90px072px0;颜色:#3c3c43;字体大小:25px;border-bottom:1pxsolid#bdbdbd;字体粗细:500;}.footer{a{字体大小:30px;颜色:#2c2c2c;}}.modal-footer{填充:30px040像素0;颜色:#3c3c43;字体大小:30px;字体粗细:500;}}}.modal-backup{宽度:100%;高度:100%;位置:固定;顶部:0;右:0;底部:0;左:0;z-指数:1000;background:rgba(0,0,0,0.5);2-调用页面中介绍的方法一(1)importMydialogfrom'../carrer/mydialog.vue';(2)引入组件组件:{Mydialog}(3)在html中插入组件datashowDialog中的参数:false,dialogOption:{text:'Welcome',cancelButtonText:'No',confirmButtonText:'Yes',isShowCancelButton:''},在methods中,让它在需要出现弹框的时候出现showDialog就可以了()this.dialogOption.text=`

确认拒绝?

`;this.dialogOption.isShowCancelButton=truethis.showDialog=true;this.$refs.mydialog.confirm().then(()=>{this.showDialog=false;this.refuse(id)}).catch(()=>{this.showDia日志=假;})},3.使用方法2,因为在项目中经常用到,每次使用都要带相同的参数,所以封装了一个js,(模态框的工具类),调用即可使用时1)-新建一个js文件dialogUtil,复制下面的代码即可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=文本||"请输入弹窗标题";让suc=typeofshowCancelButton==“函数”?显示取消按钮:成功;让err=typeofshowCancelButton==“函数”?成功:错误;if(typeofshowCancelButton!="function"){this.dialogOption.istonShowCancelButton;C=!!}else{this.dialogOption.isShowCancelButton=true;}this.parent[this.isShowDialog]=true;吨his.confirm(成功,错误);}//Ballback回调确认(成功,错误){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:parameters,typecreatByType(args,type){type=!!type?类型:1;switch(type){case1:returnnewnormalDialog(args)break;情况2:中断默认值:中断;}}}2)因为很多页面用到,让它全局(在main中引入就好),那么其他页面就不用引入了importdbDiaLogUtilfrom'./assets/js/dialogUtil'Vue.prototype.$dbDiaLogUtil=dbDiaLogUtil;3)使用时,页面引入的组件在调用(1)importMydialogfrom'../carrer/mydialog.vue';(2)导入组件组件:{Mydialog}(3)插入组件data()中对象形式isShowDialog:false,dialogOption:{text:'',cancelButtonText:'No',confirmButtonText:'Confirm',isShowCancelButton:false},dialogNormal:null,在挂载时初始化this.dialogNormal=this.$dbDiaLogUtil.creatByType({parent:this,isShowDialog:'isShowDialog',dialogOption:'dialogOption',mydialog:'mydialog'});最后在需要弹框的地方调用,一行代码'Failedtoexecute'就搞定了)})我是新来的,如有不妥请指教...