【微信小程序】自定义弹窗文本输入框效果图&完整代码

效果图

在输入框中进行内容的输入点击确认后在姓名一栏进行更新修改点击返回后姓名一栏不做任何修改在这个的基础上你可以自定义任何弹窗

wxml

<view class="row xian" bindtap='emailClick'><view class="zuo">姓名</view><view class="you"><view class="zhushi">{{volunteer.name}}</view><image src="../../images/icon/jiantou.png" class="jiantou"></image></view></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 style="width:100%" class='wishName'><input style="width:100%" bindinput='wish_put' placeholder='请输入姓名' placeholder-class="holder_cls" class='wish_put'></input></view><view style="width:94%" class='wishbnt' bindtap='name'>确定</view></view>

js

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

wxss

这里提供我这个弹窗的样式，当然你也可以自己进行更改定义

/* 弹窗样式 */.model{position: absolute;width: 100%;height: 100%;background: #000;z-index: 999;opacity: 0.5;top: 0;left:0;}.modalDlg{width: 80%;position: fixed;top:300rpx;left: 0;right: 0;z-index: 9999;margin: 0 auto;padding: 55rpx;background-color: #fff;border-radius: 20rpx;display: flex;flex-direction: column;align-items: center;}.windowRow{display: flex;flex-direction: row;justify-content: space-between;align-items: center;padding-bottom: 15rpx;width: 100%;}.userTitle{font-size: 42rpx;}.back{text-align: center;color: #f0a500;font-size: 30rpx;}.wishName{width: 100%;justify-content: center;flex-direction: row;display: flex;margin: 40rpx 0rpx;}.wish_put{width: 100%;border: #ededef 1rpx solid;background-color: #f6f7fb;border-radius: 12rpx;padding: 30rpx 20rpx;margin: 20rpx 0rpx;}.holder_cls{color: #909399;}.wishbnt{background-color: #fec600;text-align: center;border-radius: 50rpx;padding: 25rpx;color: white;}/*弹窗样式结束*//* 下面的姓名样式，不要也没什么影响 */.jiantou{width: 35rpx;height: 35rpx;margin-left: 10rpx;}.fenge{margin-bottom: 30rpx;}.xian{border-bottom: #e5e5e5 1rpx solid;}.yellow{color: #f0a500;font-weight: 700;}.box{background-color: white;padding: 0rpx 25rpx;display: flex;flex-direction: column;}.row{height: 120rpx;display: flex;justify-content: space-between;align-items: center;}.you{height: 100%;display: flex;justify-content: space-between;align-items: center;}.zhushi{font-size: 28rpx;color: #808080;}/* 下面的姓名样式结束 */