# Popup 弹出层

[toc]

`Popup` 组件提供一个弹出层容器，可自定义展示内容。

## 组件引入

在`app.json`或在`index.json`中引入：

```json

{
  "usingComponents": {
    "tea-popup": "../dist/popup/index"
  }
}

```

## 用法

### 基础用法

通过 `show` 属性控制是否显示弹出层。

```html
<tea-button bind:click="handleClick">显示弹出层</tea-button>

<tea-popup show="{{ show }}">
  <view class="demo-popup">内容</view>
</tea-popup>
```

```javascript
Page({
  data: {
    show: false
  }, 
  
  handleClick() {
    this.setData({
      show: true
    });
  }
})
```

### 指定弹出位置

通过 `position` 属性来设置弹出位置，支持 `top`、`center`、`bottom` 三个位置可选择，默认为 `center`。

```html
<tea-popup 
  show="{{ show }}" 
  position="top"
>
</tea-popup>
```

### 点击遮罩层关闭弹出层

通过 `backdropClosable` 属性来设置点击遮罩层关闭弹出层。

```html
<tea-popup 
  show="{{ show }}" 
  position="top" 
  backdropClosable="{{ true }}"
>
</tea-popup>
```

## Props

| 参数               | 描述           | 类型              | 默认值      | 可选值                           |
| ---------------- | ------------ | --------------- | -------- | ----------------------------- |
| position         | 弹出位置         | `String`        | `center` | `['top', 'center', 'bottom']` |
| show             | 是否显示弹出层      | `Boolean`       | `false`  | -                             |
| backdropClosable | 点击遮罩层是否关闭弹出层 | `Boolean`       | `false`  | -                             |
| offsetY          | 弹出层在Y轴上的偏移量  | `String,Number` | `0`      | -                             |

## 事件

| 事件名                | 描述       | 回调参数 |
| ------------------ | -------- | ---- |
| bind:closed        | 关闭弹出层时触发 | -    |
| bind:clickbackdrop | 点击遮罩层时触发 | -    |

## Slots

| 名称  | 描述             |
| --- | -------------- |
| -   | 自定义 Popup 显示内容 |

## 外部样式类

| 类名          | 描述       |
| ----------- | -------- |
| `ext-class` | 组件根节点样式类 |

## CSS变量属性表

| 变量名                    | 默认值                    | 描述  |
| ---------------------- | ---------------------- | --- |
| popup-background-color | @background-base-color | -   |
| popup-border-radius    | @border-radius-none    | -   |
| popup-zindex           | @zindex-popup          | -   |