## Popup 弹出层
### 使用指南
``` javascript
import { Popup } from 'vant';
Vue.component(Popup.name, Popup);
```
### 代码演示
#### 基础用法
`popup`默认情况下是从中间弹出。
:::demo 基础用法
```html
从中间弹出popup
```
```javascript
export default {
data() {
return {
popupShow1: false
}
}
};
```
:::
#### 从不同位置弹出层
可以设置`position`属性，`popup`即能从不同位置弹出，`position`的可选值有`top`，`bottom`，`right`，`left`。
:::demo 从不同位置弹出层
```html
从下方弹出popup
从上方弹出popup
从右方弹出popup
从左方弹出popup
```
```javascript
export default {
data() {
return {
popupShow1: false,
popupShow2: false,
popupShow3: false,
popupShow4: false
}
},
watch: {
popupShow2(val) {
if (val) {
setTimeout(() => {
this.popupShow2 = false;
}, 2000);
}
}
}
};
```
:::
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| v-model | 当前组件是否显示 | `Boolean` | `false` | - |
| overlay | 是否显示背景遮罩层 | `Boolean` | `true` | - |
| lockOnScroll | 背景是否跟随滚动 | `Boolean` | `false` | - |
| position | 弹出层位置 | `String` | - | `top`, `bottom`, `right`, `left` |
| closeOnClickOverlay | 点击遮罩层是否关闭弹出层 | `Boolean` | `true` | - |
| transition | 弹出层的`transition` | `String` | `popup-slide` | |
| preventScroll | 是否防止滚动穿透 | `Boolean` | `false` | - |