微信小程序开发（七）

自定义弹窗的实现

一般情况下我们使用wx.showModal显示弹窗，并能够实现确认/取消的简单操作。但是有些情况下我们希望能够实现弹窗获取input值，这时候就需要用到微信小程序的modal组件

如在点餐系统中，提交订单时我们需要顾客输入其餐台号。

wxml

<view class="submit-btn activity-color-bg" bindtap='showModal'>
  <view class="submit-btn-label color-white">提交订单view>
view>
<modal hidden="{{hiddenModal}}" title="餐台号" confirm-text="提交" cancel-text="取消" bindconfirm = 'modelConfirm' bindcancel='modelCancel'>
   <input placeholder='请输入您的餐台号' bindinput='input'/>
modal>

JS函数

input: function (e) {
    this.setData({ tableid: e.detail.value })
  },

input函数用于获取弹窗中输入的值

  showModal: function (e) {
    this.setData({ hiddenModal: false })
  },

showModal函数绑定在按钮上，点击按钮则设置hiddenModal为false，即显示弹窗。

  modelConfirm: function (e) {
    this.setData({ hiddenModal: true })
    let that = this;
    if (this.data.tableid <= getApp().globalData.tableNum && this.data.tableid>0) {

      wx.showToast({
        title: '当前餐台号为' + this.data.tableid,
        icon: 'none'
      })
    } else if (this.data.tableid > getApp().globalData.tableNum || this.data.tableid <=0) {
      wx.showToast({
        title: '请输入正确的餐台号！',
        icon: 'none'
      })
    } else {
      wx.showToast({
        title: '您尚未输入餐台号！',
        icon: 'none'
      })
    }
  },

  modelCancel: function (e) {
    this.setData({ hiddenModal: true })
    wx.showToast({
      title: '您尚未输入餐台号！',
      icon: 'none'
    })
  },

modelConfirm 和modelCancel函数绑定在modal组件的bindconfirm和bindcancel上，分别对应点击确定/取消对应的操作。