当前位置:首页 > Layui组件扩展 > 正文内容

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

summerbloom5个月前 (05-01)Layui组件扩展866

名称:

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

功能介绍:

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


如何使用

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

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

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

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

预览图:

image.png



快速上手

配置并注册扩展

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

  • 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

扫描二维码推送至手机访问。

版权声明:本文由Layui中文网博客发布,如需转载请注明出处。

本文链接:http://blog.layui.org.cn/post/11.html

分享给朋友:
返回列表

上一篇:地区选择组件 layui-areaSelect

没有最新的文章了...

“图标选择扩展 layui-exts-icon-selected ” 的相关文章

证件照扩展 layui-exts-idcard-upload

证件照扩展 layui-exts-idcard-upload

介绍实名认证页面的实现,适用于证件照认证等页面。效果预览图下载地址:https://gitee.com/layui-exts/id-card-upload...

动态生成sku表/skuTable

动态生成sku表/skuTable

SkuTable 组件简介基于 Layui 的商品规格组件。v1.x版本不再维护,推荐使用v2.x版本。主要功能:支持商品单规格和多规格切换支持商品属性配置支持规则/规格值添加、删除支持规格行拖拽排序支持SKU表同一列批量赋值支持SKU表上传图片支持SKU表相同属性值行合并效果预览下载地址:http...

地区选择组件 layui-areaSelect

地区选择组件 layui-areaSelect

layui-areaSelect介绍基于layui扩展的省市区县选择组件,支持如下特性:1、指定层级选择,可指定到省份、城市、区县选择,默认省份选择;2、支持编辑回显,可指定已选数据,组件展示时将自动勾选;3、支持排除选择,可指定哪些区域作为排除选择,组件展示时将隐藏这些区域;4、多级联动机制,选中...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。