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

安装与调用

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

引入CSS：

<link rel="stylesheet" href="https://unpkg.com/lu2/theme/edge/css/common/ui/LightTip.css">

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

<script type="module" src="https://unpkg.com/lu2/theme/edge/js/common/ui/LightTip.js"></script>

或者使用import语法。

<script type="module">
    import lightTip from 'https://unpkg.com/lu2/theme/edge/js/common/ui/LightTip.js';
</script>

如果是npm安装调用，则：

import 'lu2/theme/edge/css/common/ui/LightTip.css';
import 'lu2/theme/edge/js/common/ui/LightTip.js';

如果 JS import语法报错，试试在业务代码中动态引入。

import('lu2/theme/edge/js/common/ui/LightTip.js');

概要

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

<ui-lighttip>自定义元素

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

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

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

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

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

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

例如：点击执行lt1.open=true

内置提示效果

<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('loading提示', 'loading');

演示兼测试：成功轻提示 失败轻提示 常规轻提示 loading提示

推荐使用 document.loading = true / false 语法控制全局loading效果，详见“Loading效果”。

语法

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

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

参数

content

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

options

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

LightTip静态方法

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

import message from './LightTip.js';
message.success('成功');
message.error('失败');
message.loading('正在加载中...');
message.custom('自定义', {
    type: 'warning'
});

演示兼测试：成功轻提示 失败轻提示 loading提示 常规轻提示

静态方法语法

message.success(content, time);
message.error(content, time);
message.loading(content);

message.custom(content, {
    type: 'warning',
    time: 4000
});
// 或
message.custom(content, type, time);

顶层显示

模态对话框显示的时候显示轻提示会被覆盖，因为模态对话框的层级顶层，此时，可以将请提示元素append到对话框元素中，使用示意：

<dialog id="modal" is="ui-dialog">
    <button id="b7" class="ui-button" type="primary">显示轻提示</button>
</dialog>

b7.addEventListener('click', function () {
    modal.append(message.success('操作成功'));
});

显示模态对话框