**popup组件**
Cyan提供了多种弹窗,可以通过参数实现多种弹窗样式。
~~~
<cmui-popup options>
content
</cmui-popup>
~~~
options说明
| 参数 | 说明 | 类型 |默认值 |
| --- | --- |--- |--- |--- |
| visible | 弹窗是否显示| boolean|false |
|maskEvent|点击背景是否关闭|boolean|true
|position|弹出方向 center rignt top bottom left 5种|string|'right'
|stopPageScroll|是否阻止页面滚动|boolean|true
|targetStyle|加入style样式|object|空
|targetClass|加入class样式|array|空
## visible(弹窗是否显示)
visible控制弹窗是否显示。popup组件基本被其它组件调用,加上sync双向绑定数据。
~~~
<cmui-popup :visible.sync="true">
content
</cmui-popup>
~~~
![visible](https://box.kancloud.cn/c12d65599b7655cd42717575b371cdf8_349x599.gif)
## maskEvent(点击背景是否关闭)
~~~
<cmui-popup :mask-event="true">
content
</cmui-popup>
~~~
![maskEvent](https://box.kancloud.cn/7670aa9ea32b39aafe561cdb65e27691_238x420.gif)
## position(弹出方向)
~~~
<cmui-popup :position="right">
content
</cmui-popup>
~~~
![popup_right](https://box.kancloud.cn/7d028501fcba7bc524dc855031c3f005_838x1482.png =375x)
~~~
<cmui-popup :position="top">
content
</cmui-popup>
~~~
![popup_top](https://box.kancloud.cn/a985cf786dfd1eab8297c536a21f41d2_834x1472.png =375x)
~~~
<cmui-popup :position="bottom">
content
</cmui-popup>
~~~
![popup_bottom](https://box.kancloud.cn/1b9dbfb99cd3397c0ab007e349859d59_834x1486.png =375x)
~~~
<cmui-popup :position="left">
content
</cmui-popup>
~~~
![popup_left](https://box.kancloud.cn/66a7e8f0032f04d62ce7e6752ac840b8_838x1480.png =375x)
~~~
<cmui-popup :position="center">
content
</cmui-popup>
~~~
![popup_center](https://box.kancloud.cn/9d64b7deba878fd2f51fab75406f2e22_858x1496.png =375x)
## stopPageScroll(是否阻止页面滚动)
默认当弹窗出现,页面禁止滚动。反之可以页面滚动。
## targetStyle(加入style样式)
加入自定义style
## targetClass(加入class样式)
加入自定义class