名称：

layui图标选择扩展 layui-exts-icon-selected

功能介绍：

基于 layui 扩展的图标选择器扩展, 常见的使用场景如管理后台"角色权限菜单"管理中, 给菜单分配图标的能力, 结合同样还是我编写的 numberInput 扩展, 你还可以给菜单增加排序能力!

如何使用

1. 下载代码, 通常你可以在 releases 页面下载到最新版额.

2. 解压扩展到您项目里面的扩展目录, 譬如: libs/layui_exts

3. 使用 layui.config 和 layui.extend 配置并注册扩展.

4. 使用 layui.use 来按需引用扩展并调用.

预览图：

快速上手

配置并注册扩展

layui    .config({        base: "./libs/layui_exts/",    })    .extend({        iconSelected: "iconSelected/js/index",    });

引用并使用

layui.use(["iconSelected"], function () {    var iconSelected = layui.iconSelected;    /**     * v2 版本开始保持跟 layui 官方写法同步     * 使用 render 方法渲染, 并且 v2 开始支持 class 批量绑定     * v1 版本仅支持 id 绑定, 且初始化是 init     * 请注意辨别, v2版本于2021年8月19日发布     * 庆祝码云开放 Gitee Page 功能     * 本组织下所有开源扩展都会于近期同步升级到v2     * 都将统一初始化函数为  render     */    iconSelected.render(".layui-select-icon", {        event: {            select(event, data) {                console.log("选中的图标数据", { event, data });            },        },    });});

可配置项目

本扩展配置项很少, 几乎都是写死的设定一般不需要修改. 当然我会告诉你有哪些配置项!

使用配置项

layui.use(["iconSelected"], function () {    var iconSelected = layui.iconSelected;    // 第二个参数用于接收配置项    iconSelected.render(".layui-select-icon", {});});

可用配置项

• width

• 弹窗的宽度

• 默认: 300

• icons

• 图标列表

• 默认: layui 默认图标

• 参考: https://www.layui.com/doc/element/icon.html

• placeholder

• 输入框提示文字

• 默认: 请选择

• value

• 当前选中值

• 默认: 输入框的值

• 注意! 理论上该值一定是字体图标的样式名, 如: layui-icon layui-icon-username

• zIndex

• 老版本为: 999

• 在: v1.0.2.20210616 改为 19961005

• zIndex 值

• 默认值:

• 别告诉我你不知道 zIndex 啥意思!

需要注意的配置项

在 v1.0.3.20210713 之前 offsetX 和 offsetY 的作用是偏移弹层, 弹层的实现逻辑是 fixed 绝地定位, 即 offsetX(Y) 是相对于 自身为止(基于浏览器窗口) 进行偏移, 主要考虑场景是部分特别小的窗口内嵌选择器显示不全的问题

在 v1.0.3.20210713 开始变为 absolute 相对定位, 更加简便, 即 offsetX(Y) 对应着 自身(相对于父元素)偏移量

• offsetX

• 弹窗 X 轴偏移量

• 默认: 30

• 在 v1.0.3.20210713 变更为 0

• 不建议修改

• offsetY

• 弹窗 Y 轴偏移量

• 默认: 10

• 在 v1.0.3.20210713 变更为 5

• 不建议修改

事件

本扩展就一个事件, 同样是写在 event 下面, 该事件为 select 事件, 即选中某个图标时触发, 参考代码如下!

layui.use(["numberInput", "layer", "iconSelected", "form"], function () {    var iconSelected = layui.iconSelected;    iconSelected.render(".layui-select-icon", {        event: {            select(event, data) {                console.log("选中的图标数据", { event, data });            },        },    });});

API

!> 如果你想使用 API 服务, 那么请确保扩展版本高于等于 v1.0.1.20210609, API 的调用方式为: iconSelected.xxx, 譬如: iconSelected.icons 即可获取默认图标列表

!> 添加图标操作都是支持链式写法的, 即 iconSelected.addIcon().addIcon()......init() 这样, 但是请注意! 因为渲染顺序问题, 如果要添加图标确保 初始化 API 在最后面!

render

• 初始化

• 在 v1 版本为 init

• 这就没啥好说的了

• 如果需要添加图标请保证该 API 在最后面调用!

icons

• 取出默认的图标数据

• 即 layui 官方图标清单

addIcon(name,classList)

• 添加一个图标(在尾部)

• 参数分别为:

• 显示的名字

• 图标的样式

addIcons(icons)

• 批量添加图标(在尾部)

• 参数为数组

• 你需要自行维护数组内部的键值对, 确保键值对符合规范格式

• 即: name=名字, classList=图标

addIconBefore(name,classList)

• 添加一个图标(在头部)

• 其他的就跟 addIcon 一样了

addIconsBefore(icons)

• 批量添加图标(在头部)

• 其它的就跟 addIcons 一样了

下载地址：

https://gitee.com/layui-exts/icon-selected.git