基础组件 - Popup 弹出层 - 《Vant Weapp v0.5.5 小程序组件》

在 app.json 或 index.json 中引入组件

"usingComponents": {
  "van-popup": "path/to/vant-weapp/dist/popup/index"
}

popup默认从中间弹出

<van-popup show="{{ show }}" bind:close="onClose">内容</van-popup>

Page({
  data: {
    show: false
  },
  onClose() {
    this.setData({ show: false });
  }
});

通过position属性设置 Popup 弹出位置

<van-popup
  show="{{ show }}"
  position="top"
  overlay="{{ false }}"
  bind:close="onClose"
>
  内容
</van-popup>

参数	说明	类型	默认值
show	是否显示弹出层	`Boolean`	`false`
z-index	z-index 层级	`Number`	`100`
overlay	是否显示背景蒙层	`Boolean`	`true`
position	可选值为 `top` `bottom` `right` `left`	`String`	-
duration	动画时长，单位为毫秒	`Number \| Object`	`300`
custom-style	自定义弹出层样式	`String`	`</td></tr><tr><td>overlay-style</td><td>自定义背景蒙层样式</td><td><code>String</code></td><td>`
close-on-click-overlay	点击蒙层是否关闭 Popup	`Boolean`	`true`
safe-area-inset-bottom	是否适配iPhoneX	`Boolean`	`true`

事件名	说明	参数
bind:close	蒙层关闭时触发	-
bind:click-overlay	点击蒙层时触发	-

类名	说明
custom-class	根节点样式类

原文: https://youzan.github.io/vant-weapp/#/popup