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

1-封装模态框组件Mydialog(样式可以自己写)<template><transitionname="modal"tag="div"><divclas

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

<template>
 <transition name="modal" tag="div">
 <div class="modal" v-show="visible" transition="fade">
 <div class="modal-dialog">
 <div class="modal-content">
 <!--头部-->
 <div class="modal-header">
 <slot name="header">
 <!-- <p class="title">{{modal.title}}</p> -->
 </slot>
 <a @click="close(0)" class="xd xd-close" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
 </div>
 <!--内容区域-->
 <div class="modal-body">
 <slot name="body">
 </slot>
 </div>
 <!--尾部,操作按钮-->
 <div class="modal-footer">
 <slot name="footer">
 <slot name="button" class="footer">>
 <a v-if="modal.showCancelButton" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="button" :class="modal.cancelButtonClass" @click="close">{{modal.cancelButtonText}}</a>
 <a v-if="modal.showConfirmButton" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="button" :class="modal.confirmButtonClass" @click="close()">{{modal.confirmButtonText}}</a>
 </slot>
 </slot>
 </div>
 </div>
 </div>
 </div>
 <!-- <div v-show="show" class="modal-backup"></div> -->
 </transition>
</template>

<script>
export default {
 props: {
 visible: { type: Boolean, default: false },
 options: {
 type: Object,
 default: {}
 }
 },
 // 采用v-bind将visible传入
 methods: {
 ConfirmHandler () {
 this.$emit('update:visible', false); // 更新visible的值（可选，如果想点击确认之后，进行一些处理再决定关不关闭，可取消在这里更新visible）
 this.$emit('Confirm'); // 传递确认事件
 },
 CancelHandler () {
 this.$emit('update:visible', false); // 更新visible的值
 this.$emit('Cancel'); // 传递取消事件
 },
 close () {
 this.visible = false;
 }
 },
 /**
 * modal 模态接口参数
 * @param {string} modal.title 模态框标题
 * @param {boolean} modal.showCancelButton 是否显示取消按钮
 * @param {string} modal.cancelButtonClass 取消按钮样式
 * @param {string} modal.cancelButtonText 取消按钮文字
 * @param {string} modal.showConfirmButton 是否显示确定按钮
 * @param {string} modal.confirmButtonClass 确定按钮样式
 * @param {string} modal.confirmButtonText 确定按钮标文字
 */
 computed: {
 /**
 * 格式化props进来的参数,对参数赋予默认值
 */
 modal () {
 let modal = this.options;
 if (modal) {
 modal = {
 title: modal.title || '提示',
 showCancelButton: typeof modal.showCancelButton == 'undefined' ? true : modal.showCancelButton,
 cancelButtonClass: modal.cancelButtonClass ? modal.showCancelButton : 'btn-default',
 cancelButtonText: modal.cancelButtonText ? modal.cancelButtonText : '取消',
 showConfirmButton: typeof modal.showConfirmButton == 'undefined' ? true : modal.cancelButtonClass,
 confirmButtonClass: modal.confirmButtonClass ? modal.confirmButtonClass : 'btn-active',
 confirmButtonText: modal.confirmButtonText ? modal.confirmButtonText : '确定',
 };
 } else { // 使用时没有传递参数
 modal = {
 title: '提示',
 showCancelButton: true,
 cancelButtonClass: 'btn-default',
 cancelButtonText: '取消',
 showConfirmButton: true,
 confirmButtonClass: 'btn-active',
 confirmButtonText: '确定',
 };
 }
 return modal;
 },
 },

}
</script>

<style lang="scss" scoped>
.modal-enter-active {
 animation: modal-in 0.35s linear;
}

.modal-leave-active {
 animation: modal-in 0.35s reverse linear;
}

@keyframes modal-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: 0 8px 24px 7px rgba(0, 0, 0, 0.11);
 z-index: 1002;
 overflow: hidden;

 .modal-content {
 > div {
 // padding: 0.15rem 0.4rem;
 }
 .modal-header {
 background: url("../assets/images/tournaments/1.png") no-repeat;
 background-size: cover;
 height: 70px;
 img {
 width: 100%;
 }
 }
 .modal-body {
 // padding: 90px 0 72px 0;
 color: #3c3c43;
 font-size: 25px;
 border-bottom: 1px solid #bdbdbd;
 font-weight: 500;
 }
 .footer {
 a {
 font-size: 30px;
 color: #2c2c2c;
 }
 }
 .modal-footer {
 padding: 30px 0 40px 0;
 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);
}
</style>

2-使用方法1

页面中引入在进行调用

(1) import Mydialog from '../carrer/mydialog.vue';

(2)引入组件

 components: {
 Mydialog
 }

(3  在html中插入组件

<Mydialog v-show="isShowDialog" :dialog-option="dialogOption" ref="mydialog"></Mydialog>

data中的参数

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

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

 showDialog()
 this.dialogOption.text = ` <p>确认拒绝？</p> `;
 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，复制下面的代码就好了

class normalDialog {
 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 || "请输入弹框标题";
 let suc = typeof showCancelButton == "function" ? showCancelButton : success;
 let err = typeof showCancelButton == "function" ? success : error;
 if (typeof showCancelButton != "function") {
 this.dialogOption.isShowCancelButton = !!showCancelButton;
 } else {
 this.dialogOption.isShowCancelButton = true;
 }
 this.parent[this.isShowDialog] = true;
 this.confirm(suc, err);
 }

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

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

}

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

 switch (type) {
 case 1:
 return new normalDialog(args)
 break;
 case 2:
 break
 default:
 break;
 }
 }
}

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

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

3)在使用的时候

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

(1) import Mydialog from '../carrer/mydialog.vue';

(2)引入组件

 components: {
 Mydialog
 }

 （3） 在html中插入组件

 <Mydialog v-show="isShowDialog" :dialog-option="dialogOption" ref="mydialog"></Mydialog>

在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('失败执行的')})

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