Vue.js弹出模态框组件开发

lang= "scss" >

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

}

}

调用

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

})