当前位置:   article > 正文

微信小程序组件化开发:自定义一个modal弹出窗(Dialog对话框_微信小程序 dialog

微信小程序 dialog

this.triggerEvent(‘cancel’)

},

// 点击确定按钮的回调函数

confirm() {

this.setData({ show: false })

this.triggerEvent(‘confirm’)

}

}

})

index.wxss的代码:

.mask {

position: absolute;

left: 0;

right: 0;

top: 0;

bottom: 0;

display: flex;

justify-content: center;

align-items: center;

background-color: rgba(0, 0, 0, 0.63);

z-index: 9999;

}

.modal-content {

display: flex;

flex-direction: column;

width: 90%;

background-color: #fff;

border-radius: 10rpx;

}

.main-content {

width: auto;

height: 100%;

padding: 10px;

text-align: center;

justify-content: center;

overflow: hidden;

}

.title{

height: 80rpx;

line-height: 80rpx;

text-align: center;

border-bottom: 1px solid #eee;

font-size: 28rpx;

color: #333;

overflow: hidden;

background-color: #F8F8F8;

}

.modal-btn-wrapper {

display: flex;

flex-direction: row;

height: 100rpx;

line-height: 100rpx;

border-top: 1rpx solid rgba(7, 17, 27, 0.1);

}

.cancel-btn, .confirm-btn {

flex: 1;

padding: 10px;

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
  

闽ICP备14008679号