vue中使用模态框传参_vue移动端模态框（可传参）

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

>

{{modal.cancelButtonText}}

{{modal.confirmButtonText}}

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;

},

},

}

.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);

}

2-使用方法1

页面中引入在进行调用

(1) import Mydialog from '../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，复制下面的代码就好了

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中插入组件

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

初来乍到，如有不对的还请指教...