企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
**alert组件** Cyan提供了4种alert弹窗。分别是简单alert,设置标题和内容alert,超长文本内容alert,其它另类alert。 基本用法 ~~~ maple.alert(options) ~~~ options说明 | 参数 | 说明 | 类型 |默认值 | | --- | --- |--- |--- |--- | |title|alert标题|string|空 |content|alert内容|string|空 |okText|关闭按钮文言|string|'确定' |okFn|alert自动运行的函数|function|null |okStyle|关闭按钮样式|object|null |okDisable|关闭按钮是否置灰|boolean|false |okDisableStyle|关闭按钮置灰样式|object|null ## title(alert标题) ~~~ maple.alert({ title:'这是标题' }) ~~~ ![alert_1](https://box.kancloud.cn/3b97583778b4e94ba59b1ad0bf8ec6c3_704x474.png) ## content(alert内容) ~~~ maple.alert({ title:'这是标题', content:'这是内容' }) ~~~ ![alert_2](https://box.kancloud.cn/13e244696b6492dc74f6d410ee783a8c_750x522.png) ## okText(关闭按钮文言) ~~~ maple.alert({ title:'这是标题', content:'这是内容', okText:'妥了' }) ~~~ ![alert_3](https://box.kancloud.cn/a4259511dd78042fc216a86afd6cb4f6_722x394.png) ## okFn(alert自动运行的函数) ~~~ maple.alert({ content: '', okFn() { clearTimeout(timer); }, callback() { let str = '其实这个功能没什么用,我做这个功能只是想让你明白,你可以动态的去改变这里的文字,以及其他你想改变的东西.你可以查看一下DEMO中的源代码,看看它是如何实现的。' let length = str.length; let index = 1; timer = setInterval(function() { vm.content = str.slice(0, index++); if (index > length) { clearTimeout(timer); } }, 100) } }) ~~~ ![alert_4](https://box.kancloud.cn/f152d9396eff7796518c87a6e9321621_236x420.gif) ## okStyle(关闭按钮style样式) ~~~ maple.alert({ title:'这是标题', content:'这是内容', okStyle:'background:#ff4c48;' }) ~~~ ![alert_5](https://box.kancloud.cn/cbea13a2e99af3893794fcd4938cb991_740x538.png) ## okDisable(按钮是否设置为disable) 默认false显示okStyle样式。为true时,执行okDisableStyle样式。 ~~~ maple.alert({ title:'这是标题', content:'这是内容', okDisable:true }) ~~~ ## okDisableStyle(disable按钮style样式) ~~~ maple.alert({ title:'这是标题', content:'这是内容', okStyle:'background:#ff4c48;', okDisable:true, okDisableStyle:'background:#ccc' }) ~~~ ![alert_6](https://box.kancloud.cn/edf1e763277eef660b28a036fb030245_734x522.png)