**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)