先看下效果
自己调样式太好玩了哈哈哈
参考官方文档
用官方的直接copy过来就可以实现
https://developers.weixin.qq.com/miniprogram/dev/component/input.html
wxml
需要在要获取数据的输入框绑定bindinput ,绑定后需要在js上定义一个函数
<show-Model show="{{hiddenmodalput}}" title="修改资料" confirm-text="提交" cancel-text="取消" bindcancel="quxiao" bindconfirm="tijiao">
<input bindinput='inputBtn' style="text-align: center;" type='text' placeholder="请输入要修改的昵称..." auto-focus />
</show-Model>
js
在定义函数后,可在inputBtn监听到你输入的数据
Page({
data: {
inputNickname: "",
}
//取消按钮
quxiao: function (e) {
this.setData({
hiddenmodalput: false,
})
},
//提交按钮
tijiao: function (e) {
let that = this
console.log("昵称:" + that.data.inputNickname);
},
inputBtn(e) {
console.log("e{}==========>" + JSON.stringify(e.detail.value))
this.setData({
inputNickname: e.detail.value
})
},
标签:showModel,inputBtn,自定义,inputNickname,value,获取,input
From: https://www.cnblogs.com/rzkwz/p/16877198.html