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

安装与调用

引入CSS：

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

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

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

或者使用 import 语法。

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

本轻提示效果出现在页面的顶部，多用在交互操作完毕后的成功或失败提示场景上，带有感情性质。

<ui-lighttip> 自定义元素

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

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

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

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

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

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

内置提示效果

<ui-lighttip> 元素内置了成功提示和出错提示的样式，通过设置 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>

动态插入提示元素

可以直接在页面中插入 <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);
ele.open = true;

实际开发的时候，通常不会使用上面两种动态创建的方法，因为有些啰嗦，均是使用下面即将介绍的静态语法或构造语法。

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

LightTip 快捷语法

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

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

语法和参数

语法

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

其中 time 和 type 两个参数可以无序。

参数

content

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

options

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