使用小程序写一个弹窗输入组件

1.半透明的遮盖层

<view class="body">   <button bindtap='eject'>弹窗</button> </view> <view class="model" catchtouchmove='preventTouchMove' wx:if='{{showModal}}'></view>

wxss代码：

.model{   position: absolute;   width: 100%;   height: 100%;   background: #000;   z-index: 999;   opacity: 0.5;   top: 0;   left:0; }

js代码：

 /**    * 页面的初始数据    */   data: {     showModal: false,   },    /**    * 控制遮盖层的显示    */   eject:function(){     this.setData({       showModal:true     })   }

2.弹窗窗口实现

<view class="modalDlg" catchtouchmove='preventTouchMove' wx:if='{{showModal}}'>   <view class='windowRow'>     <text class='userTitle'>标题   </text>     <view class='back' bindtap='back'>       返回     </view>   </view>   <view class='wishName'>     <input bindinput='wish_put' placeholder='请输入内容' class='wish_put'></input>   </view>   <view class='wishbnt'>     <button class='wishbnt_bt' bindtap='ok'>确定</button>   </view> </view>

wxss代码：

.modalDlg{   width: 70%;   position: fixed;   top:350rpx;   left: 0;   right: 0;   z-index: 9999;   margin: 0 auto;   background-color: #fff;   border-radius: 10rpx;   display: flex;   flex-direction: column;   align-items: center; }  .windowRow{   display: flex;   flex-direction: row;   justify-content: space-between;   height: 110rpx;   width: 100%; }  .back{   text-align: center;   color: #f7a6a2;   font-size: 30rpx;   margin: 30rpx; }  .userTitle{   font-size: 30rpx;   color: #666;   margin: 30rpx; }  .wishName{   width: 100%;   justify-content: center;   flex-direction: row;   display: flex;   margin-bottom: 30rpx; }  .wish_put{   width: 80%;   border: 1px solid;   border-radius: 10rpx;   padding-left: 10rpx; }  .wishbnt{   width: 100%;   font-size: 30rpx;   margin-bottom: 30rpx; }   .wishbnt_bt{   width: 50%;   background-color: #f7a6a2;   color: #fbf1e8;   font-size: 30rpx;   border: 0; }

js代码：

/**    * 页面的初始数据    */   data: {     showModal: false,     textV:''   },    /**    * 控制显示    */   eject:function(){     this.setData({       showModal:true     })   },    /**    * 点击返回按钮隐藏    */   back:function(){     this.setData({       showModal:false     })   },    /**    * 获取input输入值    */   wish_put:function(e){     this.setData({       textV:e.detail.value     })   },    /**    * 点击确定按钮获取input值并且关闭弹窗    */   ok:function(){     console.log(this.data.textV)     this.setData({       showModal:false     })   }

3.完整代码

<view class="body">   <button bindtap='eject'>弹窗</button> </view> <view class="model" catchtouchmove='preventTouchMove' wx:if='{{showModal}}'></view> <view class="modalDlg" catchtouchmove='preventTouchMove' wx:if='{{showModal}}'>   <view class='windowRow'>     <text class='userTitle'>标题   </text>     <view class='back' bindtap='back'>       返回     </view>   </view>   <view class='wishName'>     <input bindinput='wish_put' placeholder='请输入内容' class='wish_put'></input>   </view>   <view class='wishbnt'>     <button class='wishbnt_bt' bindtap='ok'>确定</button>   </view> </view>

wxss代码：

.body{   width: 100%;   height: 100%;   background-color: #fff;   position: fixed;   display: flex; }  .body button{   height: 100rpx; }  .model{   position: absolute;   width: 100%;   height: 100%;   background: #000;   z-index: 999;   opacity: 0.5;   top: 0;   left:0; }  .modalDlg{   width: 70%;   position: fixed;   top:350rpx;   left: 0;   right: 0;   z-index: 9999;   margin: 0 auto;   background-color: #fff;   border-radius: 10rpx;   display: flex;   flex-direction: column;   align-items: center; }  .windowRow{   display: flex;   flex-direction: row;   justify-content: space-between;   height: 110rpx;   width: 100%; }  .back{   text-align: center;   color: #f7a6a2;   font-size: 30rpx;   margin: 30rpx; }  .userTitle{   font-size: 30rpx;   color: #666;   margin: 30rpx; }  .wishName{   width: 100%;   justify-content: center;   flex-direction: row;   display: flex;   margin-bottom: 30rpx; }  .wish_put{   width: 80%;   border: 1px solid;   border-radius: 10rpx;   padding-left: 10rpx; }  .wishbnt{   width: 100%;   font-size: 30rpx;   margin-bottom: 30rpx; }   .wishbnt_bt{   width: 50%;   background-color: #f7a6a2;   color: #fbf1e8;   font-size: 30rpx;   border: 0; }

js代码：

Page({    /**    * 页面的初始数据    */   data: {     showModal: false,     textV:''   },    /**    * 控制显示    */   eject:function(){     this.setData({       showModal:true     })   },    /**    * 点击返回按钮隐藏    */   back:function(){     this.setData({       showModal:false     })   },    /**    * 获取input输入值    */   wish_put:function(e){     this.setData({       textV:e.detail.value     })   },    /**    * 点击确定按钮获取input值并且关闭弹窗    */   ok:function(){     console.log(this.data.textV)     this.setData({       showModal:false     })   } })

推荐教程：《微信小程序》

以上就是使用小程序写一个弹窗输入组件的详细内容，更多内容请关注技术你好其它相关文章！