2018-10-26 微信小程序弹窗组件的用法

问题

最近在搞微信小程序，项目中有个弹窗选择的需求，官方的api文档中，有个wx.showModal()的接口，可以显示一个弹窗，但是这个弹框只能显示一个文字的content。。代码如下：

 wx.showModal({
   title: '提示',
   content: '只能是一段文字',
   success: function (res) { },
  })

image.png

---

如果我要在弹窗中放输入框，或者弹窗的内容中有checkbox需要选择，该怎么做呢？
搜了一下发现，原来这个api对应的有个<modal>组件,可以做到。。官方文档似乎没有这个组件的介绍。。
hidden属性控制modal的显示

在<modal>标签中就可以自定义内容啦

  <modal
    hidden="{{hideModal}}" 
    bindcancel="onPressCancel"
    bindconfirm='onPressComfirm'
    title="这是标题"
  >
        <view>这是自定义内容</view>
   </modal>

image.png

小技巧

如果我们不需要确定和取消按钮，该怎么做呢？其实只需要设置属性cancel-text=''(或者cancelText),confirm-text=''(或者confirmText)就可以啦,然后还可以设置title=''这样自由度更高，可以实现很多效果，发挥你的想象力吧

image.png