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

Fork Me

LightTip轻提示

安装与调用

本前端轻提示可以单独作为插件使用。

引入CSS:

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

本组件为Web Components,引用JS时需添加type="module",例如直连:

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

或者使用import语法。

<script type="module">
    import lightTip from 'https://qidian.gtimg.com/lulu/edge/js/common/ui/LightTip.js';
</script>

概要

如果是桌面浏览器,本组件的轻提示效果在顶部显示,如果是移动端浏览器,本组件的轻提示效果在视区中间显示,类似常见的toast效果。

<ui-lighttip>自定义元素

轻提示效果底层使用的是<ui-lighttip>元素实现的,例如假设页面中有如下的内容:

<ui-lighttip id="lt1">我是提示内容</ui-lighttip>

则下面的语法可以触发提示内容的显示与隐藏:

// 显示,二选一
lt1.open = true;
lt1.show();

// 隐藏,二选一
lt1.open = false;
lt1.hide();

实际开发,一般不需要开发者手动执行隐藏,因为点击轻提示元素,或者3s后提示会自动隐藏。

例如:

我是提示内容

内置提示效果

<ui-lighttip>元素内置了成功提示和出错提示的UI,通过设置type属性实现,例如:

<ui-lighttip id="lt2" type="success">我是成功提示</ui-lighttip>
<ui-lighttip id="lt3" type="error">我是失败提示</ui-lighttip>
<ui-lighttip id="lt4" type="warning">我是警告提示</ui-lighttip>
我是成功提示 我是失败提示 我是警告提示

提示时间设置

提示时间使用time属性进行设置,单位是ms。例如:

<ui-lighttip id="lt5" time="1000">一秒入魂</ui-lighttip>
一秒入魂

1秒隐藏测试:

动态插入提示元素

可以直接在页面中插入<ui-lighttip>元素实现轻提示效果,例如:

document.body.insertAdjacentHTML('beforeend', '<ui-lighttip type="success" open>操作成功</ui-lighttip>');

测试:


或者使用createElement方法进行创建,例如:

let ele = document.createElement('ui-lighttip');
ele.type = 'success';
ele.textContent = '操作成功';
document.body.append(ele);
// append之后显示有利于键盘访问
ele.open = true;

测试:

但是上面2种动态创建的方法还是有些啰嗦,因此,本组件还提供了显示轻提示的快捷语法。

LightTip快捷语法

本组件会在全局暴露一个名为LightTip的类,可以用来生成轻提示效果,语法非常灵活,例如:

new LightTip('成功提示', 'success');
new LightTip('失败提示', 2000, 'error');
new LightTip('常规提示', {
    time: 4000
});

演示兼测试:

语法和参数

语法

new LightTip(content, options);
new LightTip(content, time?, type?);

其中timetype两个参数可以无序。

参数

content
必须。String字符串。表示提示的信息内容,支持HTML字符串。快捷方式中LightTip方法中的content参数可以缺省。
options
可选。Object纯对象。具体参数参见下表:
参数名称 支持类型 默认值 释义
type String normal 配合自定义信息状态的CSS
time Number 4000 可选。Number数值,提示条出现到隐藏的停留时间,默认4s。单位毫秒ms

LightTip静态方法

LightTip类上还有几个静态方法,方便开发者快捷使用,使用示意如下:

import lightTip from './LightTip.js';
lightTip.success('成功');
lightTip.error('失败');
lightTip.custom('自定义', {
    type: 'warning'
});

演示兼测试:

静态方法语法

lightTip.success(content, time);
lightTip.error(content, time);
lightTip.custom(content, {
    type: 'warning',
    time: 4000
});
// 或
lightTip.custom(content, type, time);
本页贡献者:

zhangxinxu,popeyesailorman