首页 > 编程语言 >微信小程序自定义showModel后怎么获取获取input框输入值

微信小程序自定义showModel后怎么获取获取input框输入值

时间:2022-11-10 15:34:47浏览次数:72  
标签:showModel inputBtn 自定义 inputNickname value 获取 input

先看下效果

自己调样式太好玩了哈哈哈

参考官方文档

用官方的直接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

相关文章