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

写项目的时候发现小程序没有自带的弹窗输入的组件，只能自己写一个。1.半透明的遮盖层遮盖层的样式和显隐事件wxml代码：<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.弹窗窗口实现弹窗窗口的样式和显隐事件wxml代码：<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.完整代码最后献上完整代码，有点Up嗦了，想尽量详细点wxml代码：<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})}})推荐教程：《微信小程序》以上就是使用小程序写一个弹窗输入组件的详细内容，更多请关注小潘博客其它相关文章！