@retailwe/ui-popup NPM

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`	-