LuLu UI Edge版中文文档 » Loading加载

安装与调用

loading效果支持以插件形式单独使用，引入下面CSS即可：

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

如果想要使用loading增强功能，可以引入下面的JS文件（非必须）：

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

本组件为web-components，引用时需添加type="module"，也可采用如下方式进行引用：

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

如果是npm安装调用，则：

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

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

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

自定义loading元素

图形loading-内联

跟随文本-正常尺寸：

<ui-loading></ui-loading>

跟随文本-较大尺寸：

<ui-loading size="3"></ui-loading>

跟随文本-自定义颜色：

<ui-loading style="--color: pink"></ui-loading>

图形loading-块级

单行呈现-正常尺寸：

<ui-loading rows="5"></ui-loading>

单行呈现-较大尺寸：

<ui-loading rows="5" size="3"></ui-loading>

单行呈现-较大尺寸-自定义颜色：

<ui-loading rows="5" size="3" style="--color: #ff0000"></ui-loading>

其中：

rows

表示loading提示元素的行数，和<textarea>元素应用，会有对应的高度表现，最大值是15。

如果我们想要手动设置<ui-loading>元素的高度，可以类似下面这样处理：

<ui-loading class="some-classname" rows="auto"></ui-loading>

.some-classname {
    height: 88px;
}

size

表示loading圈圈图形的大小。目前支持size范围是1-4，默认值是2。

其中：

• size="1"对应宽高10px；
• size="2"或者不设置size属性对应宽高20px；
• size="3"对应宽高30px；
• size="4"对应宽高40px。

--color

表示loading圈圈图形的颜色。未设置默认为蓝色，设置了则覆盖。

文本打点loading

正在加载中

<ui-dot></ui-dot>

支持is-dot属性设置，例如：

正在加载中<q is-dot></q>

正在加载中

图文loading并存

<ui-loading rows="5">正在加载中<ui-dot></ui-dot></ui-loading>

普通元素呈现loading

多用在使用JavaScript动态处理交互效果的场景下。

<div class="ui-loading" style="height: 100px;"></div>

普通元素的loading效果通过添加类名.ui-loading实现。支持简单的提示文本，例如：

<div class="ui-loading" style="height: 100px;">正在加载中<ui-dot></ui-dot></div>

如果引入Loading.js，可以使用element.loading = true方法进行loading样式的添加。

Loading效果JS增强

Loading.js主要做了下面体验增强的事情：

1. 扩展了loading属性。可以设置按钮，或者其他元素为loading状态，可以取消loading状态，以及获取当前元素是否处于loading状态。
2. 扩展了自定义元素<ui-loading>的size和rows属性。支持size和rows属性的获取和设置。即dom.size=4，元素的size属性值也会跟着改变，也可以直接dom.size获取设置的size属性值。

注意：使用自定义元素<ui-loading>的size和rows属性时，需将代码放在带有type="module"的脚本中。

设置按钮loading

点击我

button.addEventListener('click', function () {
    this.loading = true;
    // 一段时间后loading效果去除
    setTimeout(() => {
        this.loading = false;
    }, 2000);
});

设置普通元素loading

例如下面这种“加载更多”按钮交互。

.loading-more-a {
    display: block;
    height: 40px;
    line-height: 38px;
    border: 1px solid #ddd;
    text-align: center;
    color: gray;
}

<a href="javascript:" class="loading-more-a" role="button">加载更多</a>

button.addEventListener('click', function () {
    this.loading = true;
});

实际开发，建议先清除按钮元素里面的文本内容，再执行button.loading = true。

当然，我们也可以直接把子元素替换为<ui-loading>元素。例如：

button.addEventListener('click', function () {
    this.innerHTML = '<ui-loading></ui-loading>';
});

全局loading

当你想要一个全局的loading并且始终居中显示的时候，就可以使用下面的代码创建一个全局的loading。

document.loading = true;

如果你想隐藏全局的loadng，设置下面代码即可：

document.loading = false;

如果你想使用自定义的loading文案，可以通过传递字符串值实现（支持HTML标签）。

document.loading = '我是自定义loading文案';

如果你想使用自定义的分段提示文案，可以通过传递数组实现。

document.loading = ['我是分段自定义loading文案', '我是依旧是分段自定义loading文案'];

语法和参数

// 是否正在loading
const isLoading = element.loading;
// 是否正在全局loading
const isGlobalLoading = document.loading;
// 设置元素loading
element.loading = true;
// 取消loading效果
element.loading = false;
// 获取<ui-loading>元素的size值
let size = element.size;
// 修改<ui-loading>元素的size值
element.size = 3;

经测试，不会和浏览器IMG元素和IFRAME元素的原生loading属性相冲突。