## Popup
### Install
``` javascript
import { Popup } from 'vant';
Vue.component(Popup.name, Popup);
```
### Usage
#### Basic Usage
Popup is located in the middle of the screen by default
:::demo Basic Usage
```html
Show Popup
Content
```
```javascript
export default {
data() {
return {
show1: false
}
}
};
```
:::
#### Different Position
Use `position` prop to set popup display position
:::demo Different Position
```html
From Bottom
Show Dialog
From Top
Content
From Right
Close
```
```javascript
export default {
data() {
return {
show1: false,
show2: false,
show3: false,
show4: false
}
},
watch: {
show2(val) {
if (val) {
setTimeout(() => {
this.show2 = false;
}, 2000);
}
}
}
};
```
:::
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| v-model | Whether to show popup | `Boolean` | `false` | - |
| overlay | Whether to show overlay | `Boolean` | `true` | - |
| lockOnScroll | Lock body scroll | `Boolean` | `false` | - |
| position | Position | `String` | - | `top` `bottom` `right` `left` |
| closeOnClickOverlay | Close popup when click overlay | `Boolean` | `true` | - |
| transition | Transition | `String` | `popup-slide` | - |
| preventScroll | Prevent background scroll | `Boolean` | `false` | - |