npm package: @retailwe/ui-popup
Description: ## 引入
Latest version: 0.0.20

# wr-popup 弹窗效果

## 引入

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

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

## 代码演示

### 基础用法

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

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

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

```javascript
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 | 自定义关闭按钮 |