LuLu UI pure版中文文档 » LightTip轻提示

作为插件单独使用

引用下面的CSS：

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/LightTip.css">

引用下面的JS：

<script src="https://qidian.gtimg.com/lulu/pure/js/common/ui/LightTip.js"></script>

基本使用演示

桌面端浏览器在顶部显示，移动端浏览器在中间显示。

操作提示使用示意

成功轻提示 失败轻提示

使用代码如下：

button.addEventListener('click', function() {
    new LightTip().success('修改成功');
});

button.addEventListener('click', function() {
    new LightTip().error('修改失败');
});

当提示出现后，点击或者按下Enter回车键，或者按下ESC退出键会立即消失。

常规提示

不带感情色彩的信息提示

使用代码如下：

button.addEventListener('click', function() {
    new LightTip('今天的风儿甚至喧嚣');
});

自定义提示

例如，自定义一个warning状态的提示效果，新增如下CSS：

.ui-lightip[data-status="warning"] {
    background-color: #f59b00;
}

自定义-警示

JavaScript代码如下：

button.addEventListener('click', function() {
    new LightTip('这是会显示5秒的黄色LightTip', {
        status: 'warning',
        duration: 5000
    });
});

或者使用type参数进行自定义，如下：

自定义-警示2

.ui-lightip[data-type="warning"] {
    background-color: #f59b00;
}

button.addEventListener('click', function() {
    new LightTip('这是会显示5秒的黄色LightTip', {
        type: 'warning',
        duration: 5000
    });
});

语法和参数

语法

new LightTip(content, options);

参数

content

必须。String字符串。表示提示的信息内容，支持HTML字符串。

options

可选。Object纯对象。具体参数参见下表：

快捷方式

日常开发推荐使用下面两个快捷方式。

new LightTip().success(content, duration);
new LightTip().error(content, duration);

其中：

content

必须。String字符串。表示提示的信息内容，支持HTML字符串。快捷方式中LightTip方法中的content参数可以缺省。

duration

可选。Number数值。提示条出现到隐藏的停留时间。单位毫秒ms。

快捷推荐写法示意：

new LightTip().success('操作成功');
new LightTip().error('操作失败');

还可以使用下面的写法：

new LightTip('操作成功').success();
new LightTip('操作失败').error();

等同于下面的写法：

new LightTip('操作成功', {
    type: 'success'
});
new LightTip('操作失败', {
    type: 'error'
});