LuLu UI Edge版中文文档 » Toast提示

安装与调用

1. 黑色tips提示

引用下面CSS：

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

JS为：

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

或者：

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

<ui-toast> 自定义元素

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

<ui-toast id="tos">我是提示内容</ui-toast>

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

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

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

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

内置提示效果

<ui-toast> 元素内置了成功、出错和警示的提示效果，通过设置 type 属性实现，例如：

<ui-toast id="tt2" type="success">我是成功提示</ui-toast>
<ui-toast id="tt3" type="error">我是失败提示</ui-toast>
<ui-toast id="tt4" type="warning">我是警告提示</ui-toast>

提示时间设置

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

<ui-toast id="ttt" time="1000">一秒入魂</ui-toast>

动态插入提示元素

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

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

或者使用 createElement 方法进行创建，例如：

let ele = document.createElement('ui-toast');
ele.textContent = '提示内容';
ele.open = true;
document.body.append(ele);

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

Toast 静态方法

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

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

注意，使用静态方法的时候，永远都只有一个 <ui-toast> 元素，而不是每次都新创建一个 <ui-toast> 元素。

静态方法语法

toast.success(content, time);
toast.error(content, time);

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

Toast 构造语法

本组件会在全局暴露一个名为 Toast 的类，可以用来生成轻提示效果，例如：

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

每次创建的提示元素均是全新的。

构造语法和参数

语法

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

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

参数

content

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

options

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