ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
**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