# popup 弹层

> popup是一个弹层组件

[demo](demo/components/popup.html ':ignore')

## 使用方法

```
<popup appear v-model="show">
    <span @click="show=!show">❌</span>
    <div class="box">这是内容</div>
</popup>
```

```
import {Popup} from 'vivo-ui';

export default {
    components: {
        Popup
    }
};
```

## 属性

名称|类型|必填|默认值|描述
:-:|:-:|:-:|:-:|:-:
v-model|`Boolean`|`N`|`false`|是否显示
speed|`Number`&#124;` String`|`N`|`normal`|淡入淡出速度，单位ms，`0`表示无淡入淡出效果；String类型只支持`fast`,`normal`,`slow`三个值
appear|`Boolean`|`N`|`false`|初始渲染时是否淡入
background|`String`|`N`|`rgba(0,0,0,0.6)`|遮罩层背景色
layer|`Boolean`|`N`|`true`|是否有遮罩层
position|`String`|`N`|`bottom`|弹层的位置，支持`top`,`bottom`,`left`,`right`
autoClose|`Number`|`N`|`0`|多久自动关闭，单位ms，0表示不自动关闭
clickLayerClose|`Boolean`|`N`|`true`|点击遮罩层是否关闭

## 插槽

名称|必填|说明
:-:|:-:|:-:
默认|`N`|内容区域