vant popup+其他组件的组合使用，及避坑指南

做小程序开发，相信大家对于表单收集肯定不陌生。但是我们经常会碰到一些比较稍微复杂的选项，并不是简单的填一些文字，数字，或者选择一下是否就能搞定的。可能需要交互判断，或者结合其他自定义组件才能很好的展示出来，但这种组件往往都很占空间，如果一股脑都叠罗汉似的放到表单里，页面会显得非常拥挤。

那么如何解决这个问题呢？常见的方式有，popup弹出层、跳转新页面等等。

其中跳转页面的加载卡顿和不连续感会影响用户体验，除非是单独的多项收集页面，信息量很大那另说。

所以在实际应用中，popup弹出层是最常见的，用来解决组件占用屏幕问题的方式。先来看下演示：

这是一个典型的 popup + treeSelect 组件的组合，当然了，这里的treeSelect可以换成 timePicker 或者其他组件。当你觉得开新页面是大炮打蚊子，不开又很挤的时候就可以用这种方式，流畅又省空间。

用法也很简单，标签嵌套就可以了：

<van-popup show="{
     { showTree }}" round position="bottom" custom-style="height: 50%" bind:close="onCloseTreeSelect">
  <van-tree-select items="{
     { items }}" main-active-index="{
     { mainActiveIndex }}" active-id="{
     { activeId }}" bind:click-nav="onClickNav" bind:click-item="onClickItem" />
</van-popup>

注意： 这里有个很坑的点是，vant 官方文档默认的 popup 属性 close-on-click-overlay——是否在点击遮罩层后关闭，默认是 true，但是如果你不实现 bind:close 方法的话，点击遮罩层是不会关闭弹出层的

另外，对于本身就有取消或者确认的组件，如果和 popup 组合时，建议覆盖 popup 的 close 按钮，否则会比较乱。

完整代码放到了github上，持续更新中，欢迎支持：https://github.com/Joy917/signgo