消息 KLMessage

基本形式

提示信息展示格式(图标+颜色)。

<kl-message class="f-mb10">
    this is a message
</kl-message>

基本属性type

type设置样式，取值success、warning、notice、error。默认不设置则无色无图标。

<kl-message class="f-mb10" addClose>
    不设置type
</kl-message>
<kl-message type="success" class="f-mb10" addClose>
    恭喜！你所提交的信息已经审核通过。
</kl-message>
<kl-message type="warning" class="f-mb10" addClose>
    系统将于 15 : 00 - 17 : 00 进行升级，请及时保存你的资料！
</kl-message>
<kl-message type="notice" class="f-mb10" addClose>
    你好！欢迎使用。
</kl-message>
<kl-message type="error" class="f-mb10" addClose>
    系统错误，请稍后重试。
</kl-message>

基本属性class

class属性设置补充样式

<kl-message class="f-mb10 m-bg-specical" type="error">type=error,设置自定义class</kl-message>

直接插入模版

<kl-message type="notice" class="f-mb10">
    <p >
        你好！欢迎使用。
        <a class="m-template">查看详情</a>
    </p>
</kl-message>

有title属性的模式

设置title属性后得样式

<kl-message title="默认的情况" class="f-mb10" addClose > 
    不设置type
</kl-message>
<kl-message title="已成功！" type="success" class="f-mb10" addClose>
    恭喜！你所提交的信息已经审核通过，如有问题请联系客服。
</kl-message>
<kl-message title="请注意!" type="warning" class="f-mb10" addClose>
    系统将于 15 : 00 - 17 : 00 进行升级，请及时保存你的资料！
</kl-message>
<kl-message title="帮助信息" type="notice" class="f-mb10" addClose>
    你好！欢迎使用。
</kl-message>
<kl-message title="出错了！" type="error" class="f-mb10" addClose>
    系统错误，请稍后重试。
</kl-message>

API

KLMessage

Param	Type	Description
[options.data]	`object`	= 绑定属性
[options.data.type]	`string`	=> 消息类型，可选参数：`success`、`warning`、`notice`、`error`
[options.data.class]	`string`	=> 补充`class`
[options.data.title]	`string`	=> 补充`title`
[options.data.addClose]	`string`	=> 补充`addClose` 添加了该字段, 为message添加了关闭按钮