Vue自定义模态对话框弹窗 Vue自定义模态对话框弹窗

本文实例为大家分享了Vue自定义模态对话框弹窗的具体代码，供大家参考，具体内容如下
模态对话框弹窗效果：
【Vue自定义模态对话框弹窗】
文章图片

父组件（应用页面）主要代码：

子组件（自定义组件）代码：

.global-mask {position: fixed; top: 0; left: 0; z-index: 998; width: 100%; height: 100%; background: rgba($color: #000000, $alpha: 0.3); }.global-dialog {position: fixed; top: 500rpx; left: 60rpx; top: 45%; z-index: 999; width: 630rpx; background: #FFFFFF; border-radius: 15rpx; overflow: hidden; .title {font-size: 36rpx; font-weight: 500; text-align: center; line-height: 100rpx; padding-bottom: 10rpx; }.content {.text {font-size: 32rpx; text-align: center; padding-bottom: 40rpx; }.form {padding: 0 40rpx; .item {display: flex; align-items: center; justify-content: space-between; margin-bottom: 40rpx; input {width: 340rpx; height: 60rpx; border: 1px solid #eaeaea; border-radius: 10rpx; padding: 0 20rpx; }}}}.btn {border-top: 1px solid #eaeaea; display: flex; &> view {flex: 1; text-align: center; line-height: 100rpx; font-size: 32rpx; &.left {color: #666666; }&.right {color: #FFFFFF; background: #FF3F42; }}}}

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