032-element模块

1. 页面中有许多元素需要自动去完成一些处理, 譬如导航菜单的点击、Tab的切换、进度条的动态改变、面板的展开或收缩等操作, 他们往往不需要去单独调用一个方法来开启一项功能, 而页面上恰恰有太多这样的小交互, 所以我们统一归类为element组件。

2. 基础方法

2.1. 基础方法允许你在外部主动对元素发操作, 目前element模块提供的方法如下:

3. 更新渲染

3.1. 很多时候你的页面元素可能是动态生成的, 这时element的相关功能将不会对其有效, 你必须手工执行element.init(type, filter)方法即可。可以用element.render(type, filter);方法替代。

3.2. 第一个参数: type为表单的type类型, 可选。默认对全部类型的表单进行一次更新。可局部刷新的type如下表:

3.3. 第二个参数: filter, 为元素的lay-filter=""的值。你可以借助该参数, 完成指定元素的局部更新。

element.init(); // 更新全部
element.render('nav'); // 重新对导航进行渲染。

[HTML]
<div class="layui-nav" lay-filter="test1">
	...
</div>
 
<div class="layui-nav" lay-filter="test2">
	...
</div>
      
[JavaScript]
// 比如当你对导航动态插入了二级菜单, 这时你需要重新去对它进行渲染
element.render('nav', 'test1'); // 对lay-filter="test1"所在导航重新渲染。

4. 事件监听

4.1. 语法: element.on('event(过滤器值)', callback);

4.2. element模块在layui事件机制中注册了element模块事件, 所以当你使用layui.onevent()自定义模块事件时, 请勿占用element名。目前element模块所支持的事件如下表:

4.3. 默认情况下, 事件所监听的是全部的元素, 但如果你只想监听某一个元素, 使用事件过滤器即可。