自定义弹窗的实现
一般情况下我们使用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
上,分别对应点击确定/取消对应的操作。