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

教程

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后提示会自动隐藏。

例如:

我是提示内容

内置提示效果

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

演示兼测试:

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

语法

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 message from './LightTip.js';
message.success('成功');
message.error('失败');
message.loading('正在加载中...');
message.custom('自定义', {
    type: 'warning'
});

演示兼测试:

静态方法语法

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('操作成功'));
});

本页贡献者:

zhangxinxu,popeyesailorman