怎么在Vue.js中实现一个弹出模态框组件？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
组件模板
计算
安全
数据库
网络和加速
企业服务
<template>
<div class="dialog">
<div class="mask"></div>
<div class="dialog-content">
<h4 class="title">{{ modal.title }}</h4>
<p class="text">{{ modal.text }}</p>
<div class="btn-group">
<div class="btn" @click="cancel">{{ modal.cancelButtonText }}</div>
<div class="btn" @click="submit">{{ modal.confirmButtonText }}</div>
</div>
</div>
</div>
</template>模态框结构分为：头部标题、提示内容和操作区域。同时一般还会有一个遮罩层。此次需求比较简单，也无需图标等内容，所以结构上写的也比较简单。实际开发中可根据需求对结构进行相应的调整。
组件样式
.dialog {
position: relative;
.dialog-content {
position: fixed;
box-sizing: border-box;
padding: 20px;
width: 80%;
min-height: 140px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 5px;
background: #fff;
z-index: 50002;
.title {
font-size: 16px;
font-weight: 600;
line-height: 30px;
}
.text {
font-size: 14px;
line-height: 30px;
color: #555;
}
.btn-group {
display: flex;
position: absolute;
right: 0;
bottom: 10px;
.btn {
padding: 10px 20px;
font-size: 14px;
&:last-child {
color: #76D49B;
}
}
}
}
.mask {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 50001;
background: rgba(0,0,0,.5);
}
}样式比较简单，就不多说了。
组件接口
export default {
name: 'dialog',
props: {
dialogOption: Object
},
data() {
return {
resolve: '',
reject: '',
promise: '', // 保存promise对象
}
},
computed: {
modal: function() {
let options = this.dialogOption;
return {
title: options.title || '提示',
text: options.text,
cancelButtonText: options.cancelButtonText ? options.cancelButtonText : '取消',
confirmButtonText: options.confirmButtonText ? options.confirmButtonText : '确定',
}
}
},
methods: {
//确定,将promise断定为完成态
submit() {
this.resolve('submit');
},
// 取消,将promise断定为reject状态
cancel() {
this.reject('cancel');
},
//显示confirm弹出,并创建promise对象，给父组件调用
confirm() {
this.promise = new Promise((resolve, reject) => {
this.resolve = resolve;
this.reject = reject;
});
return this.promise; //返回promise对象,给父级组件调用
}
}
}在模态框组件中定义了三个方法，核心的方法是confirm，此方法是提供给父级组件调用的，返回一个promise对象。使用promise对象主要是为了异步调用，因为很多时候我们使用模态框时需要根据返回结果再进行下一步处理。
扩展提示：
如果需要扩展的话，可以通过props的dialogOption传递更多的字段，在computed中进行判断，比如增加一个字段isShowCancelButton可以控制取消按钮是否显示。其他扩展同理。
调用
<v-dialog v-show="showDialog" :dialog-option="dialogOption" ref="dialog"></v-dialog>
this.showDialog = true;
this.$refs.dialog.confirm().then(() => {
this.showDialog = false;
next();
}).catch(() => {
this.showDialog = false;
next();
})看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
