LuLu UI pure版中文文档 »

Fork Me

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参数进行自定义,如下:

.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纯对象。具体参数参见下表:
参数名称 支持类型 默认值 释义
status|type String 'normal' 定义 LightTip 状态
duration Number 3000 提示条出现到隐藏时候的停留时间。单位毫秒ms

快捷方式

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

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'
});
本页贡献者:

zhangxinxu,ziven27