1、弹窗,一个输入框,一个确定,一个取消
弹窗.png1、弹窗,一个输入框,一个确定,一个取消
wxml
<!--蒙层-->
<view class='drawer_screen' hidden="{{isHiddenDialog}}"></view>
<view class='passworddialog' hidden="{{isHiddenDialog}}">
<view class="drawer_title">提示</view>
<view class="drawer_content">
<view class="top grid">
<label class="title col-0">金额</label>
<input class="input_base input_h30 col-1" type='number' name="rName" placeholder='请输入金额' bindinput='inputNumberListener'></input>
</view>
</view>
<view class='button_sure_calcle'>
<view class='button_tb cancle' bindtap='cancleListener'>
取消
</view>
<view class='button_tb sure' bindtap='sureListener'>
确定
</view>
</view>
</view>
css
.passworddialog {
width: 650rpx;
overflow: hidden;
position: fixed;
top: 50%;
left: 0;
z-index: 1001;
background: #fafafa;
margin: -150px 50rpx 0 50rpx;
border-radius: 3px;
display: flex;
display: -webkit-flex;
flex-direction: column;
}
.drawer_title {
padding: 5px;
font: 20px "microsoft yahei";
text-align: center;
display: flex;
display: -webkit-flex;
align-items: center;
flex-direction: row;
justify-content: center;
}
.drawer_content {
margin-top: 10px;
height: 80px;
overflow-y: scroll;
display: flex;
display: -webkit-flex;
flex-direction: column;
align-items: center;
}
.top{
padding-top:8px;
}
.grid { display: -webkit-flex; display: flex; }
.title {
height: 30px;
line-height: 30px;
width: 160rpx;
text-align: center;
display: inline-block;
font: 300 28rpx/30px "microsoft yahei";
}
.input_base {
border: 2rpx solid #ccc;
padding-left: 10rpx;
margin-right: 50rpx;
}
.input_h30{
height: 30px;
line-height: 30px;
}
.col-1 {flex: 1}
.button_sure_calcle{
display: flex;
display: -webkit-flex;
flex-direction: row;
}
.button_tb{
height: 40px;
flex: 1;
display: flex;
align-items: center;
font-size: 16px;
justify-content: center;
color: white;
}
.cancle{
background: rgba(128, 128, 128, 0.473);
}
.sure{
background: #22b1b1;
}
js:
inputNumberListener:function(event){//金额输入监听
this.data.number = e.detail.value;
},
cancleListener: function () { //取消
this.data.number = "";
this.setData({
isHiddenDialog: true,
});
},
sureListener: function () {
this.setData({
isHiddenDialog: true,
});
}
网友评论