wr-popup 弹窗效果

引入

全局引入，在 miniprogram 根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。

// app.json 或 index.json
"usingComponents": {
  "wr-popup": "@retailwe/ui-popup/index"
}

代码演示

基础用法

通用弹窗组件 通过position控制弹出方向，并通过 slot 控制显示的内容和自定义关闭按钮

注意： 如要使用wx:if移除节点并希望显示退出动画，父组件应该在closeover事件触发后再进行移除

<wr-popup show="{{show2}}" position="bottom" bindclose="close">
  <view class="con" slot="content">show2</view>
</wr-popup>

Page({
  data: {
    show1: false,
    show2: false,
  },
  handleClose() {},
  close() {},
  handleTap(e) {
    const { index } = e.currentTarget.dataset;
    if (index == 1) {
      this.setData({
        show1: true,
      });
    } else {
      this.setData({
        show2: true,
      });
    }
  },
});

API

wr-popup Props

| 参数 | 说明 | 类型 | 默认值 | 版本 | | -------------- | ------------------------------------------ | ------------------ | ---------------------------- | ---- | | show | 弹窗显示状态 | boolean | false | - | | fixed | 弹窗定位方式是否为绝对定位 | boolean | true | - | | transition | 弹窗动画类型 | string | - | - | | duration | 弹窗动画时间 | object | number | { enter: 300, leave: 200 } | - | | timingFunction | 动画进入类型 | string | ease | - | | maskColor | 蒙层背景颜色 | string | rgba(0,0,0,0.5) | - | | maskStyle | 蒙层样式 | string | - | - | | contentStyle | content容器样式 | string | - | - | | bottomSafeAreaStyle | 底部安全区域样式 | string | - | - | | forbideScroll | 是否禁止滑动 | boolean | false | - | | forbidBgScroll | 是否禁止背景滑动 | boolean | false | - | | position | 弹窗弹出位置(center,left,right,top,bottom) | string | center | - | | zIndex | 当前弹窗所在的层级值 | number | 2001 | - | | mask | 是否显示遮罩层 | boolean | true | - | | maskClosable | 点击遮罩层是否能够关闭弹窗 | boolean | true | - | | isIcon | 是否显示自定义关闭按钮 | boolean | false | - | | destroyOnClose | 关闭弹框时是否移除内部节点 | boolean | true | - | | catchTouchMove | 是否捕获滚动事件 | boolean | true | - |

wr-popup Event

| 事件名 | 说明 | 参数 | | --------- | ------------------------------ | ---- | | close | 用户点击关闭按钮或者遮罩层触发 | 无 | | closeover | 关闭动画结束后触发 | 无 | | openover | 打开动画结束后触发 | 无 |

wr-popup Slot

| 名称 | 说明 | | ------- | ------------------ | | content | 自定义内容显示部分 |

| 名称 | 说明 | | ---------- | -------------- | | close_icon | 自定义关闭按钮 |